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1978 年 开始 ，O'Reilly 一 直 都 是 前 沿 发 展 的 见证 者 和 推动 者 。 超 级 极 客 们 正在 





开创 着 未 来 ， 而 我 们 关注 真正 重要 的 技术 趋势 一 一 通过 放大 那些 “细微 的 信号 ”来 
| 激 社会 对 新 科技 的 应 用 。 作 为 技术 社区 中 活跃 的 参与 者 ，O’Reilly 的 发 展 充满 了 
[创新 的 倡导 、 创 造 和 发 扬 光 大 。 


"Reilly 为 软件 开发 人 员 带 来 革命 性 的 “动物 书 ”; 创建 第 一 个 商业 网 站 (GNN) ; 
组 织 了 影响 深远 的 开放 源 代码 峰会 ， 以 至 于 开源 软件 运动 以 此 命名 ;创立 了 Make 





























杂志 ， 从 而 成 为 DIY 革命 的 主要 人 先锋， 公司 一 如 既往 地 通过 多 种 形式 缔结 信息 与 


人 的 纽带 。O’Reilly 的 会 议和 峰会 聚集 了 众多 超级 极 客 和 高 瞻 远 瞩 的 商业 领袖 ， 共 
同 描绘 出 开创 新 产业 的 革命 性 思想 。 作 为 技术 人 士 获取 信息 的 选择 ，O"Reilly 现在 






































还 将 先锋 专家 的 知识 传递 给 普通 的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 、 在 线 服务 或 























者 面授 课程 ， 每 一 项 O'Reilly 的 产品 都 反映 了 公司 不 可 动摇 的 理念 一 一 信息 是 激发 
创新 的 力量 。 
业界 评论 
“O'Reilly Radar 博客 有 口 辟 碑 。 
Wired 





“O'Reilly 凭借 一 系列 ( 真希 望 当初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 万 美元 的 
业务 。” 





Business 2.0 


“O'Reilly Conference 是 聚集 关键 思想 领袖 的 绝对 典范 。” 


“一 本 O'Reilly 的 书 就 代表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。” 
一 一 Irish Times 


“Tim 是 位 特 立 独行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 且 切 实地 
按照 Yogi Berra 的 建议 去 做 了 : “如 果 你 在 路 上 遇 到 岔路 口 ， 走 小 路 ( 岔路 )。” 
回顾 过 去 ，Tim 似乎 每 一 次 都 选择 了 小 路 ， 而且 有 几 次 都 是 一 闪 即 逝 的 机 会 ， 
尽管 大 路 也 不 错 。” 
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“这 本 书 适 合 所 有 想 要 让 网 站 变 得 更 快 的 设计 师 和 开发 人 员 阅 读 。Lara 不 仅 
认真 、 清 晰 地 解释 了 如 何 创 建 高 性 能 的 网 站 ， 同 时 也 阐述 了 如 何 引起 整个 
组 织 对 性 能 的 重视 ， 确 保 在 网 站 发 布 后 性 能 仍 是 重 中 之 重 。 











Tim Kadlec， 独 立 开 发 者 ， 咨 询 师 


“网 站 性 能 所 激发 的 用 户 情感 并 不 亚 于 网 站 外 观 所 激发 的 用 户 情感 。Lara 的 
这 本 书 非 常 重要 ， 因 为 它 帮助 我 们 意识 到 性 能 不 仅仅 是 技术 上 的 最 佳 实践 ， 
而 且 古 一 个 基本 的 设计 考量 。Lara 在 书 中 提供 了 大 量 有 用 的 建议 和 最 佳 实 
践 ， 为 任何 想 将 性 能 纳入 公司 文化 的 人 提供 了 指 














Brad Frost，Web 设计 师 


“速度 是 设计 中 不 可 或 缺 的 一 部 分 。 一 个 需要 很 长 时 间 来 加 载 的 漂亮 网 站 或 
应 用 ,会 无 人 间 津 。 这 本 书 为 设计 师 提 供 了 打造 高 性 能 网 站 所 需 的 知识 。X 








Jason Grigsby，Cloud Four 联合 创始 人 


“设计 是 性 能 策略 的 基础 。 它 定义 了 用 户 体验 和 期 望 ， 决 定 了 开发 过 程 ， 并 
直接 影响 运 维 。 设 计 师 和 开发 人 员 都 应 该 读 读 这 本 书 。 





一 一 [lya Grigorik， 人 谷歌 Web 性 能 工程 师 





“如 果 你 想 知 道 审 美 选择 如 何 影响 网 站 性 














能 ， 或 者 蜂 罕 网 络 如 何 影响 网 站 的 





用 户 体验 ， 那 么 请 读 读 这 本 书 吧 。 这 本 


提供 了 提升 和 度量 网 站 性 能 所 需 


的 工具 ， 包 括 增强 整个 公司 的 性 能 意识 的 具有 可 行 性 的 策略 。 高 性 能 的 网 





站 就 是 设计 良好 的 网 站 。 





Jason Huff，Etsy 产品 设计 经 理 





并 以 此 书 献 给 我 的 父母 。 


即使 一 个 梦想 落空 并 摔 成 了 碎片 ， 也 不 要 害怕 ， 你 完全 可 以 捡 起 其 中 一 
个 碎片 重新 来 过 。 每 个 碎片 者 可 以 成 为 一 个 值得 相信 的 新 梦想 ， 让 你 为 
之 拼搏 。 这 就 是 生活 触动 你 并 赐予 你 力量 的 方式 。 





Flavia Weedn 
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Steve Souders 序 


性 能 最 佳 实践 下 一 个 重要 的 里 程 碑 ， 就 是 在 设计 社区 中 进行 布道 。 


开始 总 结 性 能 最 佳 实践 时 ， 我 把 重点 放 在 了 不 会 影响 页 面 内 容量 的 优化 上 。 

我 想 避 免 “ 性 能 与 设计 ”之 间 的 争论 。!( 我 知道 设计 师 们 会 赢 ! ) 即使 在 这 
样 的 约束 条 件 下 ， 还 是 有 很 多 可 以 显著 提高 性 能 的 优化 点 : 压缩 、CDN、 
缓存 头 、 无 损 图 像 优 化 和 域名 分 片 等 。 


但 那 是 2004 年 的 事情 了 。 如 今 ， 这 些 显而易见 的 优化 已 经 很 普遍 了 。 但 是 
网 站 体积 和 复杂 性 的 增长 速度 非常 快 ， 使 得 提供 快速 、 aA 

成 了 一 件 更 有 挑战 性 的 事情 。 如 今 想 要 让 网 站 速度 更 快 ， 需 要 考虑 更 丰富 、 
更 加 动态 多 变 以 及 便携 的 网 络 内 容 对 性 能 的 影响 。 幸 运 的 是 ， 开 发 者 和 设 
计 者 有 相同 的 动力 去 提供 最 佳 用 户 体验 。 这 一 动力 就 是 Lara 的 这 本 书 ， 它 
将 为 大 家 展示 丰富 的 内 容 。 


毫 无 疑问 ， 网 站 的 美感 对 提供 具有 吸引 力 的 用 户 体验 至 关 重 要 。 如 今 ， 经 
过 10 年 的 最 佳 实 践 收集 ， 对 成 功 案 例 的 分 析 ， 以 及 宣扬 传输 速度 的 重要 性 
| 
性 能 放 在 一 起 考虑 是 通过 合作 创造 美丽 的 用 
户 体验 。 












































我 特意 使 用 了 美丽 的 这 个 词 。 对 于 网 站 的 设计 ， 人 们 通常 用 美丽 的 、 耳 目 
一 新 、 引 人 入 胜 和 令 人 兴奋 这 样 的 词语 来 描述 它 的 美学 特性 。 这 些 描述 同 
样 也 适用 于 速度 很 快 的 网 站 所 提供 的 体验 。 在 忍受 过 迟缓 和 令 人 无 达 的 网 





Xi 


站 后 ， 用 户 发 现 优化 过 的 网 站 同样 可 以 提供 美丽 的 体验 。 


感谢 本 书 ， 让 设计 者 和 开发 者 有 了 合作 的 框架 。Lara 列 出 了 需要 回答 的 问 
题 ， 以 及 解决 这 些 问 题 的 方法 。 她 提供 了 诸多 例子 ， 展 示 了 团队 所 面临 的 
实际 问题 ， 以 及 成 功 的 团队 是 如 何 解 决 它 们 的 。 最 重要 的 是 ，Lara 迫使 我 
们 在 设计 和 开发 的 早期 阶段 就 开始 讨论 这 些 问题 ， 这 样 随 着 代码 和 模型 的 
发 展 ， 就 有 充足 的 时 间 来 发 现 并 解决 性 能 方面 的 挑战 ， 从 而 为 用 户 创造 绝 
佳 的 体验 。 























Steve Souders ，Fastly 公司 首席 性 能 官 
《高 性 能 网 站 建设 指南 》 和 《高 性 能 网 站 建设 进 阶 指南 》 的 作者 
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Randy J. Hunt 序 





设计 师 们 常常 感到 翡 嘉 ， 因 为 设计 经 常 被 当 作 “和 蛋糕 上 的 糖 霜 "， 只 是 让 事 
物 更 好 看 、 更 吸引 人 的 装饰 。 上 糖 霜 是 最 后 一 个 步骤 ， 看 起 来 也 不 是 必需 
的 步 又。 


我 们 认为 内 容 更 重要 ， 和 蛋糕 内 部 才 是 滋味 所 在 。 蛋 料 以 糖 霜 下 的 材料 命名 
(如 胡 蓝 下 蛋糕)， 而 不 是 糖 霜 本 身 (如 奶油 乳酪 蛋糕 )。 噢 ， 内 容 ! 柔软 、 
丰富 、 美 味 的 内 容 。 我 们 不 再 喜爱 糖 霜 。 我 们 ， 也 就 是 设计 师 们 ， 关 注 的 
是 “更 重要 的 事情 ”。 

随 着 时 间 流 远 ， 我 们 逐渐 觉悟 。 我 们 同年 轻 时 的 自我 争论 。 糖 逢 也 是 有 价 
值 的 。 噢 ， 糖 霜 ! 它 甚 至 能 在 人 们 品尝 之 前 就 告诉 他 们 应 该 如 何 认 知 和 感 
知 这 个 蛋糕 。 它 是 蛋糕 对 外 的 主要 接口 。 














又 一 段 时 间 过 去 了 ， 我 们 再 一 次 醒悟 。 和 蛋糕 和 糖 霜 广 定 应 该 和 谐 地 生活 在 
一 起 。 它 们 互 为 补充 。 糖 霜 将 蛋糕 的 每 一 层 连接 在 一 起 ， 而 蛋糕 的 每 一 层 
则 为 糖 霜 的 存在 提供 了 基础 、 意 义 和 空 间 。 我 们 开始 像 关 注 和 蛋糕 的 内 部 一 
样 关注 糖 霜 。 形 式 与 内 容 ， 完 美 地 结合 在 一 起 。 





通常 ， 我 们 止 于 此 。 哈 ! 我 们 做 到 了 一 一 我 们 成 了 经 验 丰 富 、 细 致 人 微 的 
设计 师 。 





但 是 我 们 依然 无 法 制作 出 美味 的 和 蛋糕。 我们 还 没有 注意 到 最 重要 、 最 容易 
被 忽视 的 细 市 ， 那 些 看 不 见 的 细 市 。 制 作 选 用 的 是 上 乘 的 原材料 吗 ?” 配 比 
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和 时 间 控 制 同 所 在 地 的 海拔 、 使 用 的 锅 具 相 匹 配 吗 ? 什么 时 候 应 该 混合 哪 
些 材料 ?我 们 能 做 些 什么 让 蛋糕 在 运输 的 过 程 中 不 变形 ? 





设计 经 验 就 是 由 大 量 这 些 表 面 上 看 不 见 的 细节 所 组 成 的 。 我 们 通常 都 很 愿 
意 忽视 这 些 细 闻 ， 但 若 如 此 就 永远 无 法 烘焙 出 完美 的 和 蛋糕。 这 些 细 市 决定 
了 我 们 能 否 掌握 设计 这 件 事 情 本 身 。 有 时 这 些 细 市 次 深 地 隐藏 在 技术 内 部 
(比如 图 像 压缩 技术 之 间 细 微 的 差别 )， 有 了 时 又 在 设计 之 外 (比如 浏览 器 如 
何 泻 染 页 面 )。 











初级 设计 师 只 注意 表面 。 有 经 验 的 设计 师 会 透 过 表象 关注 内 在 和 目的 。 设 
计 大 师 则 充分 理解 表象 与 内 在 ， 并 且 追 求 掌 控 这 种 内 在 关联 。 


这 本 书 可 以 帮助 你 理解 并 控制 那些 之 前 容易 忽视 但 可 以 改善 设计 工作 的 属 
性 。 它 很 美味 。 别 吃 得 太 快 ， 但 请 继续 更 加 快速 地 设计 吧 ! 








Randy J. Hunt，Etsy 公司 创意 总 监 
Product Design for the Web 的 作者 
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如 果 你 在 针对 网 站 的 外 观 和 感觉 做 决策 ， 那 么 你 的 决策 会 直接 影响 网 站 的 
性 能 ， 即 使 你 的 职位 名 称 并 不 包含 设计 师 这 样 的 字眼 。 性 能 可 以 并 且 也 应 
该 是 所 有 部 门 和 人 员 的 职责 ， 因 为 组 织 中 的 每 个 人 都 会 影响 性 能 。 无 论 是 
说 服 高 层 管理 者 应 该 将 性 能 作为 工作 重点 ， 还 是 在 日 常 工作 中 权衡 网 站 的 
视觉 美感 和 页 面 速度 ， 抑 或 是 培训 和 培养 组 织 内 其 他 的 设计 师 和 开发 者 ， 
你 都 有 一 整套 可 用 的 工具 和 技术 来 帮助 你 提升 网 站 速度 。 


设计 师 是 一 个 很 特殊 的 角色 ， 他 们 会 影响 总 的 页 面 加 载 时 间 和 感知 性 能 。 
设计 过 程 中 做 出 的 决策 会 对 网 站 的 性 能 产生 巨大 影响 。 我 认为 ， 对 于 设计 
师 来 说 ， 了 人 解 关于 页 面 速度 的 基础 知识 以 及 优化 页 面 标记 和 图 片 的 各 种 方 
法 是 非常 重要 的 。 此 外 ， 设 计 师 必须 平衡 好 页 面 美感 和 页 面 速度 以 提升 终 
端 用 户 体验 ， 同 时 任何 对 网 站 进行 改动 的 人 都 应 能 够 度量 这 些 改动 对 业务 
指标 的 影响 。 


过 去 几 年 ， 我 做 过 很 多 有 关 前 端 性 能 的 演讲 ， 也 举办 过 研讨 会 。 在 和 听众 
的 谈话 中 我 意识 到 ， 性 能 这 个 主题 的 核心 是 组 织 文化 的 改变 。 没 有 人 愿意 
做 性 能 “卫士 ”或 者 “看 门人 ”， 这 样 的 角色 并 不 能 成 功 地 影响 网 站 长 期 的 
性 能 改进 ， 因 为 有 很 多 其 他 人 负责 网 站 的 用 户 体验 。 尽 管 本 书 大 部 分 章节 
的 关注 点 都 是 性 能 改进 的 技术 和 方法 ， 但 最 后 一 章 则 专门 讨论 性 能 是 一 个 
无 法 通过 技术 解决 的 文化 问题 。 改 变 组 织 文化 也 许 是 提升 网 站 性 能 中 最 难 
的 一 部 分 。 
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由 于 我 是 Etsy 公司 的 工程 经 理 ， 本 书 会 经 常 提 到 Etsy 及 其 工程 团队 的 实 
验 。 我 当前 管理 着 性 能 工程 团队 ， 之 前 管理 过 移动 Web 工程 团队 。 在 整个 
职业 生涯 中 (包括 在 Elsy)， 我 同 很 多 出 色 的 设计 师 密切 合作 过 ， 能 专门 为 
他 们 写 这 样 一 本 书 我 非常 高 兴 。 


本 书 结构 


本 书 介绍 了 各 种 在 线 工 具 和 软件 ， 它 们 能 帮助 你 提升 网 站 性 能 。 在 介绍 
图 片 生成 的 章 市 中 ， 我 们 在 例子 中 使 用 Photoshop 而 不 是 其 他 图 片 编 辑 
软件 。 


第 1 章 讨论 了 页 面 加 载 时 间 对 网 站 、 品 牌 和 整体 用 户 体验 的 影响 。 页 面 加 
载 时 间 是 构成 用 户 体验 的 诸多 因素 之 一 ， 而 且 研究 表明 ， 性 能 低下 会 对 网 
站 的 用 户 参 与 度 产生 负面 影响 。 随 着 越 来 越 多 的 人 使 用 移动 设备 接 入 互联 
网 ， 性 能 的 优先 级 也 会 提升 ， 因 为 移动 网 络 和 硬件 会 对 页 面 加 载 时 间 产 生 
负面 影响 。 设 计 师 是 一 个 很 特殊 的 角色 ， 他 们 能 提升 页 面 加 载 速度 ， 进 而 
提升 用 户 体验 。 


第 2 章 介绍 了 页 面 加 载 时 间 的 基础 知识 。 对 浏览 器 如 何 获取 和 浑 染 网 站 内 
容 有 基本 的 了 解 ， 这 一 点 非常 重要 ， 因 为 这 些 是 你 用 来 改进 网 站 性 能 的 主 
要 工具 。 这 一 章 还 介绍 了 感知 性 能 及 甚 与 总 的 页 面 加 载 时 间 的 区 别 ， 用 户 
使 用 网 站 的 体验 ， 及 用 网 站 完成 一 个 任务 的 感知 速度 ， 是 重要 的 度量 指标 。 


第 3 章 介绍 了 如 今 Web 上 使 用 的 每 一 种 主要 的 图 片 格式 。 这 一 章 涵盖 了 使 
用 和 优化 每 一 种 文件 类 型 的 最 佳 实践 。 此 外 ， 还 介绍 了 如 何 优化 将 图 片 加 
载 进 网 页 的 方式 ， 比 如 使 用 精灵 图 ， 或 用 CSS 或 SVG 替换 图 片 。 最 后 ， 讨 
论 了 如 何 延长 经 过 优化 的 图 片 解决 方案 的 使 用 寿命 ， 包 括 创 建 样式 指南 和 
自动 化 图 片 压缩 工作 流程 。 


第 4 章 探 讨 了 如 何 优化 网 站 中 的 HTML 标记 和 样式 。 简 化 HTML 和 CSS 
都 非常 重要 ， 其 次 要 优化 网 站 中 使 用 的 网 络 字 体 。 努 力 创建 整洁 、 可 复 用 
的 标记 ， 同 时 记录 任何 设计 模式 ， 这 会 节省 开发 时 间 和 未 来 的 页 面 加 载 时 
间 ， 因 为 网 站 经 过 了 编辑 和 优化 。 这 一 章 还 强调 了 加 载 顺序 、 压 缩 和 缓存 
网 站 文本 资源 的 重要 性 。 
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响应 式 Web 设计 被 认为 “对 性 能 不 利 "， 但 事实 并 不 一 定 如 此 。 第 5 章 分 
析 了 在 各 种 尺寸 的 屏幕 上 谨慎 为 用 户 加 载 内 容 的 重要 性 ， 包 括 图 片 和 字体 。 
还 讨论 了 如 何 进 行 响应 式 Web 设计 : 创建 性 能 目标 ， 在 设计 中 采用 移动 优 
先 原则 ， 度 量 不 同 屏幕 尺寸 上 的 响应 式 设 计 的 性 能 。 


为 了 了 解 网 站 用 户 体验 的 现状 及 其 随时 间 的 变化 ， 有 必要 对 主要 性 能 指标 
做 例 行 检查 。 第 6 章 详细 介绍 了 各 种 浏览 器 插件 、 纤 合 测试 和 真实 用 户 监 
探 工具， 以 及 它们 为 何 有 助 于 度量 网 站 性 能 。 在 网 站 演进 的 过 程 中 ， 不 断 
地 使 用 这 些 工 具 来 度量 性 能 的 变化 并 记录 这 些 变化 发 生 的 原因 ， 这 有 助 于 
你 和 其 他 人 了 解 是 什么 影响 了 网 站 的 性 能 。 


第 7 章 探讨 了 在 权衡 美感 和 性 能 时 会 遇 到 的 挑战 。 在 作出 这 些 艰 难 的 决策 
时 ， 要 考虑 运作 成 本 ， 度 量 用 户 行为 ， 以 及 提出 很 多 开放 式 问 题 。 然 而 ， 
只 要 具备 了 性 能 相关 的 知识 和 合理 的 工作 流程 ， 并 运行 了 试验 ， 你 就 可 以 
做 出 有 利于 整体 用 户 体验 的 设计 和 开发 决策 。 

创建 和 维护 一 流 网 站 性 能 的 最 大 障碍 是 组 织 文 化 。 对 于 各 种 类 型 和 规模 的 
组 织 来 说 ， 培 训 、 激 励 以 及 放权 给 设计 师 、 开 发 者 和 管理 人 员 都 是 一 项 挑 
战 。 第 8 章 分 析 了 如 何 打造 组 织 的 性 能 文化 ， 以 及 如 何 培养 性 能 捍卫 者 。 
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性 能 即 用 尸体 验 








想象 一 下 你 是 如 何在 网 络 上 搜索 内 容 的 。 如 有 果 一 个 网 站 的 加 载 时 间 过 长 ， 
你 一 定 很 快 关闭 页 面 ， 然 后 点 开 搜索 引擎 中 的 下 一 个 搜索 结果 。 当 你 想 要 
搜索 当地 的 天 气 或 新 闻 时 ， 如 果 一 个 网 站 需要 等 待 很 久 才能 将 相关 信息 显 
示 在 屏幕 上 ， 你 还 会 再 次 访问 这 个 网 站 吗 ? 如 果 你 在 外 出 办 事 ， 掏 出 手机 
来 想 要 查收 电子 邮件 、 对 比 商 品 价格 或 是 查询 导航 ， 怎 么 可 能 会 有 耐心 及 
受 长 时 间 的 加 载 呢 ? 你 的 时 间 越 紧迫 ， 对 网 站 快速 加 载 的 期 望 就 会 越 高 。 


页 面 速度 对 于 网 站 的 重要 性 日 益 增 加 。 如 果 你 想 为 你 的 网 站 找 一 个 页 面 加 
载 速度 的 衡量 标准 ， 可 以 使 用 下 面 这 个 原则 : 用 户 期 望 页 面 能 在 2 秒 内 加 
载 完 成 ， 当 时 间 超 过 3 秒 ， 多 达 40% 的 用 户 就 会 放弃 使 用 这 个 网 站 (http:/ 
dwz.cn/280YQf) 。 此 外 ，85% 的 移动 用 户 希 望 网 站 的 加 载 速度 至 少 和 桌面 
版 一 样 快 ， 甚 至 更 快 (http://dwz.cn/28O0Zca)。 当 你 在 设计 或 建设 一 个 网 站 ， 
或 者 考察 一 个 已 经 存在 的 网 站 时 ， 如 何 来 满足 这 些 用 户 期 望 呢 ? 























Web 性 能 就 是 用 户 体验 。 当 你 在 设计 和 开发 一 个 新 网 站 时 ， 会 综合 考虑 很 
多 和 用 户 体验 相关 的 内 容 : 页 面 布局 、 层 级 关系 、 直 观 性 、 易 用 性 等 。 网 
站 的 用 户 体验 决定 了 用 户 的 品牌 忠诚 度 、 回 访 率 以 及 是 否 会 把 你 的 网 站 分 
享 给 其 他 人 。 页 面 加 载 时 间 以 及 网 站 的 体验 速度 是 用 户 体验 中 非常 重要 的 
部 分 ， 应 该 和 网 站 的 视觉 美观 程度 受到 同等 重视 。 


























我 们 来 看 一 些 相 关 的 研究 和 数据 ， 它 们 说 明了 性 能 如 何 影响 终端 用 户 的 
体验 。 


1.1 对 品牌 的 影响 


整体 的 用 户 体验 会 影响 用 户 对 品牌 的 印象 。Akamai 的 报告 指出 ， 如 果 网 
络 购物 者 在 网 购 过 程 中 经 历 了 诸如 页 面 卡 顿 、 骨 泪 、 加 载 时 间 过 长 或 结 
账 流 程 过 于 复杂 等 问题 ，75% 的 用 户 不 会 从 该 网 站 购买 东西 (http://www. 
akamai.com/dl/reports/Site_Abandonment_Final_Report.pdf )。Gomez 研究 了 
网 络 购物 者 的 行为 (http:/www.mcrinc.com/Documents/Newsletters/201110_ 
why_web_performance_matters.pdf) 后 发 现 ，88% 的 网 络 消费 者 在 有 了 一 次 
糟糕 的 体验 后 不 太 可 能 会 再 次 访问 该 网 站 。 同 一 项 研究 还 发 现 ,“ 在 流量 高 
峰 时 段 ， 超 过 75% 的 网 络 消费 者 会 转 到 竞争 对 手 的 网 站 ， 而 不 是 会 忍受 当 
前 网 站 的 延迟 ”。 在 页 面 加 载 时 间 以 及 网 站 用 户 体验 的 其 他 竞争 方面 ， 你 是 
否 正在 流失 用 户 ， 将 他 们 推 向 竞争 对 手 那里 ?你 确定 你 的 网 站 比 竞 争 对 手 
的 更 快 吗 ? 






































1.1.1 回访 用 户 

Web 性 能 不 只 会 影响 电子 商务 网 站 ,任何 类 型 的 网 站 都 能 从 页 面 速度 的 
优化 中 受益 。 用 户 会 回访 速度 更 快 的 网 站 ，Google 的 一 项 研究 (http:/ 
googleresearch.blogspot.com/2009/06/speed-matters.html) 为 此 提供 了 证 据 。 
该 研究 发 现 ， 如 果 网 站 的 访问 速度 下 降 ， 用 户 用 该 网 站 进行 搜索 的 行为 也 
会 减少 。 实 验 发 现 ， 速 度 下 降 400 毫秒 会 使 用 户 对 该 网 站 的 搜索 行为 在 前 
三 周 减少 0.44%， 而 在 接 下 来 的 三 周 则 会 减少 0.76%。 


研究 还 发 现 ， 在 实验 中 即使 网 站 延迟 已 经 被 移 除 并 恢复 到 了 之 前 的 水 平 ， 
用 户 的 搜索 使 用 水 平 也 要 过 一 段 时 间 才 能 恢复 。 页 面 加 载 速度 的 影响 甚至 
已 经 超越 了 最 初 的 糟糕 体验 ， 用 户 会 本 能 地 记 住 之 前 访问 这 个 网 站 时 的 感 
觉 ， 并 根据 使 用 体验 来 决定 重复 使 用 这 个 网 站 的 频率 。 


1.1.2 ”搜索 引擎 排名 
页 面 加 载 速度 也 是 搜索 引擎 排序 的 依据 之 一 ， 速 度 快 的 网 站 在 搜索 结果 列 
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表 中 位 置 更 靠 前 。Google 在 它 的 搜索 结果 排序 算法 中 考虑 了 网 站 的 速度 
(http://dwz.cn/28PnVx)。 尽 管 Google 明确 说 明 页 面 内 容 在 搜索 结果 排序 中 
的 权重 会 更 高 ， 但 是 网 站 速度 仍然 影响 着 网 站 整体 的 用 户 体 验 。Google 希 
望 返回 给 用 户 的 搜索 结果 中 的 网 站 在 整体 上 能 够 提供 最 佳 的 使 用 体验 。 























忽视 网 站 的 页 面 加 载 速度 不 仅仅 是 错过 了 一 个 机 会 ， 同 时 也 不 利于 用 
户 记 住 你 的 品牌 。 微 软 进行 了 一 项 研究 (http:/research.microsoft.comy 
pubs/79628/tois08.pdf) 来 考察 用 户 对 搜索 结果 的 记忆 情况 。 参 与 者 在 搜索 
框 中 输入 一 个 自 创 的 搜索 关键 字 ， 半 小 时 之 后 会 通过 邮件 收 到 一 份 调查 ， 
要 求 他 们 在 不 重新 搜索 的 前 提 下 回忆 刚才 的 搜索 结果 。 人 研究 结果 显示 ， 有 
两 大 因素 影响 搜索 结果 的 记忆 情况 ， 其 中 之 一 是 在 搜索 结果 列表 中 的 位 序 。 
提升 页 面 加 载 速 度 能 够 提高 网 站 的 搜索 结果 排名 ， 这 对 品牌 来 说 是 非常 有 
帮助 的 。 






































品牌 和 数字 产品 设计 师 Naomi Atkinson 精辟 地 阐述 了 设计 机 构 如 何 通过 
强调 性 能 的 重要 性 来 同 客户 谈判 :“ 很 多 设计 机 构 会 忽视 一 个 重要 的 卖点 。 
除了 市 场 营 销 和 视觉 设计 的 计划 外 ， 强 调 计 划 (以 及 如 何 ) 将 客户 的 网 站 
或 服务 变 得 多 么 快 ， 将 会 产生 非常 好 的 效果 。 无 论 是 为 自己 还 是 为 客户 都 
将 带 来 好 处 。” 性 能 是 整体 用 户 体 验 的 组 成 部 分 ， 能 够 对 公司 品牌 产生 重 


影响 。 


1.2 ”对 移动 用 户 的 影响 
随 着 越 来 越 多 的 用 户 开始 使 用 移动 设备 ， 以 及 越 来 越 多 的 工作 通过 在 线 
的 方式 完成 ， 网 站 整体 用 户 体 验 的 重要 性 也 愈 发 凸显 。StatCounter Global 
Stats 的 一 份 数据 (http://gs.statcounter.com/) 显示 ， 移 动 设备 的 流量 在 互联 
网 总 流量 中 的 比例 正在 稳步 递增 (图 1-1)。 
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移动 设备 的 流量 在 互联 网 总 流量 中 的 比例 (虚线 表示 趋势 ) 


























占 互 联网 总 流量 的 百分比 
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1-1: 从 StatCounter Global Stats 的 这 份 数据 中 可 以 发 现 ， 互 联网 流量 中 移动 流 
量 的 比例 正 稳步 上 升 。 根 据 这 个 趋势 ， 移 动 设备 流量 的 增长 在 短期 内 并 不 
会 放 缓 





很 多 公司 已 经 注意 到 移动 设备 流量 的 快速 增长 。Mary Meeker 的 互联 网 趋 
势 报 告 (http:/slideshare/lttKWvZ) 显示 ，2013 年 早期 Groupon 的 交易 有 
45% 来 自 移动 设备 ， 而 两 年 前 还 不 足 15%。 在 Etsy 公司 (我 负责 性 能 工程 
团队 ) ，2014 年 年 初 的 流量 有 50% 来 自 移动 设备 。 


几乎 所 有 网 站 的 移动 流量 都 在 增长 ， 这 将 会 突出 网 络 上 页 面 加 载 时 间 的 问 
题 ， 特 别 是 对 手持 设备 用 户 来 说 。 一 项 研究 (http://slidesha.re/eW8wQ9) 显 
示 ， 对 于 全 球 大 量 的 互联 网 用 户 来 说 ， 手 持 设 备 是 主要 的 互联 网 接 和 方式 。 
接近 50% 的 非洲 和 亚洲 互联 网 用 户 只 使 用 移动 设备 ， 对 比 之 下 美国 只 

25%。 这 项 研究 将 那些 从 不 或 很 少 使 用 “桌面 ”互联 网 的 用 户 归 类 为 “只 使 
用 移动 设备 ”( 这 项 研究 将 平板 电脑 归 类 为 “桌面 ”设备 ) 。 总 而 言 之 ， 大 
量 用 户主 要 使 用 手持 设备 来 访问 互联 网 ， 而 在 这 些 设备 上 都 有 其 独特 的 一 
系列 挑战 。 


1.2.1 移动 网 络 
手持 设备 需要 花费 更 多 的 时 间 来 加 载 网 页 ， 其 首要 原因 是 移动 网 络 中 数据 












































4 | 第 1 章 


的 传输 特点 。 在 移动 设备 接收 或 发 送 数据 前 ， 需 要 同 网 络 建立 一 个 无 线 传 
输 通道 (图 1-2)。 在 3G 连接 的 情况 下 这 可 能 需要 花费 数秒 的 时 间 。 在 设备 
同 无 线 厅 站 通信 询问 何 时 能 传输 数据 后 ， 网 络 运营 商 首先 要 将 数据 从 无 线 
基站 传输 到 自己 的 内 部 网 络 ， 然 后 再 传递 到 公 网 。 这 些 步骤 组 合 在 一 起 很 
容易 造成 数 十 到 数 千 毫 秒 的 额外 延迟 。 而 且 ， 当 无 线 通道 中 设 有 数据 传输 
时 ， 超 时 会 让 通道 进入 空闲 状态 。 这 时 需要 重新 建立 通信 通道 来 从 头 开始 
整个 流程 ， 对 Web 页 面 加 载 来 说 这 就 是 一 场 亚 梦 。 





























用 户 的 手机 信号 塔 你 的 网 络 主机 









> 司 
必须 首先 连接 到 信号 塔 。 上 以 





建立 连接 后 ， 用 户 
的 浏览 器 就 可 以 连 
接 到 你 的 服务 器 














图 1-2: 在 移动 设备 取 回 加 载 网 站 所 需 的 资源 前 ， 设 备 必须 同 网 络 建立 无 线 通道 
这 个 过 程 会 消耗 数秒 的 时 间 ， 严 重 抑 慢 页 面 加 载 速度 


ITlya Grigorik 写 道 (http://dwz.cn/29zWGz) :“ 如 今 ， 延 迟 已 成 为 网 络 浏览 体 
验 的 制约 因素 ， 而 不 是 带宽 。 用户 所 体验 到 的 延迟 越久 ， 用 户 的 设备 获取 
数据 所 需 的 时 间 就 会 越 入 ， 页 面 完 全 加 载 的 耗 时 就 会 越 长 。 我 们 在 第 2 章 
中 会 更 详细 地 介绍 页 面 速度 相关 的 基础 内 容 。 





延迟 和 带宽 是 什么 ? 

延迟 是 指数 据 包 从 一 个 点 传输 到 另 一 个 点 所 消耗 的 时 间 。 例如， 服务 器 收 
到 并 处 理 请 求 有 延迟 ， 服 务 器 将 资源 发 送 回去 到 浏览 器 接收 之 间 也 有 延 迟 。 
延迟 同 基础 的 物理 属性 息息相关 (比如 光速 )。 通 常用 毫秒 来 衡量 延迟 (一 
毫秒 是 一 秒 的 千 分 之 一 )。 

带宽 是 通信 通道 的 最 大 吞吐 量 ， 比 如 光线 或 者 你 的 移动 服务 商 能 够 同时 传 
输 多 少数 据 。 打 个 比方 ， 一 辆 出 租车 和 一 辆 大 客车 跑 在 同一 条 公路 上 ， 它 
们 的 延迟 相同 ， 但 大 客车 的 带宽 更 高 。 


尽管 网 络 本 身 的 确 在 缓慢 地 加 速 ， 但 当前 用 户 在 移动 设备 上 加 载 页 面 时 可 
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能 正在 忍受 非常 糟糕 的 体验 。 一 个 普通 的 美国 用 户 的 桌面 电脑 在 连接 WiFi 
时 ， 请 求 来 回 的 平均 延迟 只 有 50 毫秒 (http://slidesha.re/1ttLhPw)。 这 是 六 
览 器 发 送 请 求 到 服务 器 再 通过 网 络 将 响应 发 送 回 来 所 需要 的 时 间 。 但 是 ， 
在 移动 网 络 情况 下 ， 数 据 来 回 的 时 间 需 要 300 毫秒 以 上 。 用 更 直观 的 例子 
来 比较 这 个 差异 : 移动 网 络 和 老式 的 拨号 连接 一 样 慢 。 


将 加 载 页 面 的 每 一 个 请 求 的 来 回 所 需 的 时 间 添 加 到 起 初 与 网 络 建立 无 线 通 
道 所 使 用 的 时 间 (大 概 1000~2000 毫秒 ) 中 ， 你 就 会 明白 移动 网 络 性 能 是 
如 何 直接 对 网 站 的 用 户 体验 产生 影响 的 。 而 且 ， 由 于 一 些 因素 ， 比 如 用 户 
正在 参加 一 个 大 量 人 群 聚集 的 活动 或 者 正 处 在 一 个 信号 不 好 的 区 域 ， 很 难 
预测 无 线 网 络 何 时 会 断 掉 连 接 。 


这 意味 着 你 真 的 需要 在 为 移动 设备 优化 网 站 设计 时 更 加 重视 性 能 ， 因 为 页 
面 加 载 时 间 对 移动 用 户 的 体验 以 及 他 们 是 否 会 使 用 你 的 网 站 有 很 大 影响 。 
很 多 公司 的 研究 都 为 此 提供 了 证 据 。 我 在 Esty 的 团队 发 现 ， 在 页 面 添加 
160 KB 的 隐藏 图 片 ， 将 会 使 移动 端 网 页 跳出 率 增加 12%。Google 的 广告 产 
品 DoubleClick 移 除了 客户 端的 一 个 重 定向 (http://dwz.cn/29zWaE)， 然 后 
发 现 移动 设备 上 的 点 击 率 提高 了 12%。 为 移动 用 户 进行 性 能 优化 的 一 大 好 
处 是 ， 使 用 其 他 任何 设备 访问 网 站 的 用 户 也 将 同时 从 这 些 优化 中 受益 。 


1.2.2 ”移动 行为 模式 

无 论 通 过 何 种 设备 访问 网 站 ， 用 户 体验 都 会 被 页 面 加 载 时 间 所 影响 。 但 是 ， 
如 果 用 户 使 用 的 是 移动 设备 ， 则 缓慢 的 加 载 时 间 会 导致 更 差 的 用 户 体验 ， 
因为 除了 网 速 慢 ， 移 动用 户 的 使 用 习惯 也 不 同 。 




































































Google 的 一 项 研究 (http://dwz.cn/29zXBa) 发 现 ， 用 户 在 以 下 情况 下 使 用 
智能 手机 : 








。 外 出 及 家 中 

。 为 了 交流 和 通信 

。 使 用 时 间 短 

。 需要 快速 地 获取 信息 时 


类 似 地 ， 平 板 电脑 主要 用 来 娱乐 或 浏览 信息 。 而 另 一 方面 ， 桌 面 电脑 主要 
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用 来 进行 更 严肃 或 研究 密集 型 的 任务 。 根 据 这 个 研究 的 结果 ， 通 常情 况 下 
智能 手机 是 下 面 这 些 在 线 行为 的 入 口 : 


。 搜索 特定 信息 
。 浏览 

。 购物 

。 网 络 社交 





当 设 计 网 站 时 ， 需 要 考虑 用 户 以 有 限 的 时 间 在 设备 上 完成 这 些 任务 的 便捷 
性 , 以 及 移动 网 络 对 此 的 影响 程度 。 同 时 要 记 住 ， 只 使 用 移动 设备 的 用 户 没 
有 选择 的 余地 ， 只 能 在 手机 上 完成 这 些 任务 ， 同 时 无 论 使 用 什么 设备 ， 所 
有 的 用 户 都 不 喜欢 浪费 时 间 。 设 计 应 该 直观 且 简 单 易 用 ， 而 且 无 论 在 什么 
平台 上 ， 页 面 都 要 尽 可 能 快 地 可 以 进行 交互 操作 。 


1.2.3 ”移动 硬件 
另外 ， 即 使 是 在 手持 设备 上 使 用 WiFi， 受 天 线 长 度 和 输出 功率 的 影响 ， 用 
户 的 速度 体验 也 可 能 会 很 慢 。WiFi 可 以 同时 使 用 不 止 一 根 天 线 来 发 送 和 接 
收 信号 ， 但 是 大 部 分 智能 手机 并 不 支持 多 信道 技术 。 而 且 手 持 设备 的 WiFi 
天 线 长 度 也 比 笔记 本 和 桌面 电脑 的 要 短 很 多 。 


同时 手持 设备 试图 让 电池 电量 更 高 效 (这 是 智能 手机 用 户 体验 的 重要 部 
分 )， 而 省 电 的 主要 途径 之 一 就 是 限制 无 线 信号 的 发 送 。 桌 面 电脑 并 不 使 用 
电池 ， 因 此 使 用 WiFi 时 并 不 需要 限制 信号 强度 。 最 后 ， 现 在 大 部 分 智能 
手机 只 支持 比较 老 且慢 的 WiFi 标准 ， 只 有 新 式 的 手持 设备 才 支 持 最 新 的 
802.11ac 标准 。 















































很 多 对 页 面 加 载 时 间 的 优化 同时 也 会 优化 设备 的 电量 消耗 ， 从 而 对 用 户 
体验 产生 影响 。 在 移动 设备 上 ， 诸 如 WiFi 信号 强度 、JavaScript 浑 染 和 图 
片 泻 染 等 都 会 对 电量 消耗 产生 影响 。 在 一 项 研究 中 (http://www2012.org/ 
proceedings/proceedings/p41.pdf) 研究 者 发 现 ， 如 果 Amazon 将 它 全 部 的 
图 片 文件 转 成 92% 质量 压缩 的 JPEG 文件 ， 在 Android 手机 上 加 载 首 页 将 
节省 20% 的 电量 ， 而 同样 的 改动 对 Facebook 来 说 则 可 以 节省 30% 的 电 
量 。 这 个 改进 通过 减少 电量 消耗 提升 了 用 户 体验 ， 而 图 像 质量 的 损失 几乎 
可 以 忽略 不 计 。 另 一 项 研究 (https://www.usenix.org/system/files/conference/ 
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nsdil3/mnsdil13-fnal177.pdf) 发 现 ， 移 动 设备 上 的 主要 页 面 中 ， 多 达 35% 的 
加 载 时 间 花 费 在 处 理 诸如 HTML 解析 和 JavaScript 执行 等 任务 上 。 

















总 而 言 之 ， 优 化 网 站 的 性 能 将 会 对 整体 的 用 户 体验 产生 影响 ， 包 括 电 池 续 
航 能 


1.3 设计 师 对 性 能 的 影响 


从 用 户 输入 网 址 、 点 击 按钮 或 是 从 下 拉 列 表 中 选择 一 个 条 目 到 页 面 响应 之 
间 的 延迟 ， 会 影响 他 们 对 网 站 的 印象 。100 毫秒 以 内 的 延迟 用 户 几 乎 感觉 不 
到 ， 而 100~300 毫秒 的 延迟 就 会 被 明显 地 察觉 到 。300~1000 毫秒 的 延迟 会 
让 用 户 感觉 到 计算 机 正在 工作 ， 但 如 果 延 迟 超过 1000 毫秒 ， 用 户 的 心智 就 
会 开始 切换 到 其 他 事情 上 去 了 ， 俗 称 溜 号 。 


这 些 数字 很 重要 ， 因 为 整体 来 说 我 们 所 设计 的 网 站 正 包含 越 来 越 丰富 的 内 

量 的 动态 元 素 、 庞 大 的 JavaScript 文件 、 漂 亮 的 动画 、 复 杂 的 图 形 
等 。 你 可 能 会 关注 于 优化 设计 和 布局 ， 但 这 些 都 是 以 页 面 速度 为 代价 的 。 
有 些 响应 式 设 计 的 网 站 会 非常 不 负责 任 地 使 用 大 量 用 来 适 配 小 屏幕 所 需 的 
HTML 标记 和 图 片 ， 无 意 之 中 强迫 用 户 加 载 了 非 必要 的 资源 。 
























































设计 师 在 实现 响应 式 Web 设计 的 同时 ， 已 经 决定 了 在 不 同 的 屏幕 尺寸 中 如 
何 显示 内 容 。 这 些 决定 会 显著 地 影响 页 面 加 载 时 间 ， 而 响应 式 Web 设计 为 
在 设计 流程 中 考虑 性 能 提供 了 一 个 非常 好 的 契机 。 


回顾 一 下 你 近期 的 设计 。 你 使 用 了 多 少 不 同 的 字号 ? 用 了 多 少 图 片 ? 图 片 
多 大 ， 采 用 的 是 什么 图 片 格式 ? 你 的 设计 对 HTML 标记 和 CSS 的 结构 有 何 


影响 ? 



































设计 师 的 决策 通常 决定 了 网 站 建设 的 其 他 方面 。 在 设计 初始 阶段 需要 做 出 

以 下 决策 。 

。 颜色 和 渐变 ， 影 响 图 片 格式 的 选择 ， 是 否 需要 透明 度 ， 需 要 创建 多 少 
CSS 精灵 图 ， 以 及 需要 使 用 多 少 CSS3 属性 。 

。 布局 ， 影 响 HTML 结构 、 类 和 ID 名称、 设计 模式 的 复 用 能 力 以 及 CSS 
的 组 织 形式 。 
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。 字体 ， 影 响 包 含 的 字体 文件 的 大 小 和 数量 。 
。 设计 模式 ， 影 响 可 以 在 整个 网 站 中 复 用 和 缓存 的 内 容 ， 资 源 何 时 以 及 如 
何 加 载 ， 以 及 未 来 设计 师 和 开发 者 进行 修改 的 难 易 程 度 。 























这 些 决策 通常 在 产品 流程 的 初始 阶段 就 确定 下 来 了 ， 因 此 对 最 终 的 页 面 加 
载 时 间 有 很 大 的 影响 。 下 面 通 过 例子 来 说 明 。 假 设 我 们 有 一 个 标志 ， 想 要 
受 加 在 div 上 并 有 淡 蓝 色 的 背景 ， 如 图 1-3 所 示 。 








® .9 © loge psd @ ino% Celor FH ec 和 
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图 1-3: 这 个 示例 标志 的 背景 是 透明 的 ， 亚 加 在 一 个 div 上 ， 青 景 为 淡 蓝 色 




















透明 和 县 加 的 需求 会 影响 图 片 文 件 的 类 型 和 大 小 。 如 果 设 计 师 在 设计 阶段 
考虑 页 面 加 载 时 间 ， 会 思考 以 下 问题 :“ 如 果 我 将 图 片 输出 为 没有 透明 度 的 
JPEG 或 PNG-8 格式 将 会 如 何 ? 如 果 我 在 PNG-8 文件 中 使 用 亚 光 的 淡 蓝 色 
将 会 如 何 ? 这 对 性 能 将 有 何 影响 ?” ”我 们 可 以 测试 一 下 ， 看 看 输出 为 JPEG 
和 PNG-8 版 本 的 文件 大 小 ， 如 图 1-4 至 图 1-7 所 示 。 
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图 1-4: 原始 的 带 有 透明 度 的 PNG-24: 7.6 KB 
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图 1-5: 纯色 青 景 的 PNG-8: 5.0 KB 
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图 1-6: 亚 光 的 PNG-8: 2.7 KB 





Designing for 
Performance 











图 1-7: 75% 质量 、 纯 色 青 景 的 


JPEG: 20.2 KB 


在 测试 中 我 们 发 现 ， 纯 色 背 景 和 透明 度 会 导致 不 同 格式 的 文件 大 小 不 一 。 
在 第 3 章 中 我 们 将 会 介绍 更 多 关于 图 片 优化 的 内 容 ， 以 及 不 同 选择 之 间 的 


优 劣 。 


我 们 有 一 个 良好 的 契机 来 尝试 潜在 的 性 能 优势 ， 度 量 不 同 的 设计 选择 对 性 





能 的 影响 。 在 第 3 章 中 ， 我 们 将 介绍 如 何 选择 和 压缩 各 种 图 片 格式 ， 第 6 





章 中 我 们 会 介绍 如 何在 时 刻 记 住 页 面 加 载 时 间 的 前 提 下 ， 在 设计 过 程 中 进 


行 性 能 的 度量 并 帮 代 。 








新 设计 和 重新 设计 的 网 站 ， 寺 


其 性 能 都 会 被 这 些 决 策 所 影响 。 每 一 个 已 经 存 


在 的 网 站 都 可 以 进行 优化 并 测试 性 能 。 曾 经 有 一 个 网 站 ， 我 通过 清除 非 必 
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需 的 CSS、 优 化 图 片 、 颜 色 标 准 化 和 重新 认真 地 组 织 网 站 模板 中 的 资源 ， 
将 加 载 时 间 减 少 到 原来 的 一 半 。 我 通过 着 重 减少 元 余 的 HTML 和 CSS 来 减 
小 HIML、CSS 和 图 片 文件 的 体积 ， 而 不 是 重新 设计 整个 网 站 。 








在 第 4 章 中 你 可 以 阅读 到 更 多 关于 如 何 通过 优化 HTML 和 CSS 来 优化 性 能 
的 内 容 。 


即使 你 的 工作 职位 并 不 包含 设计 师 这 个 字眼 ， 如 果 你 负责 网 站 的 视觉 和 体 
验 的 决策 工作 ， 你 的 决策 就 会 直接 影响 网 站 的 性 能 。 性 能 是 大 家 共同 的 责 
任 ， 团 队 中 的 每 一 个 人 都 会 影响 性 能 。 在 做 设计 决策 时 考虑 性 能 将 对 用 户 
产生 非常 重要 的 影响 。 平 衡 视觉 美感 和 性 能 在 设计 流程 中 应 该 是 首要 的 任 
务 ， 在 第 7 章 中 会 介绍 相关 内 容 。 这 同时 也 是 组 织 内 各 部 门 进行 合作 的 一 
个 好 机 会 ， 设 计 师 和 开发 人 员 协 同 工 作 来 创造 非凡 的 用 户 体验 。 


在 下 一 章 中 ， 我 们 将 介绍 页 面 加 载 速度 的 基础 知识 ， 包 括 浏 览 器 如 何 获 取 
并 泻 染 内 容 。 理 解 用 户 的 浏览 器 如 何 同 服务 器 上 的 文件 通信 ， 网 站 文件 的 
大 小 如 何 影响 页 面 加 载 时 间 ， 以 及 用 户 对 网 站 性 能 的 看 法 ， 将 大 大 有 助 于 
你 设计 网 站 ， 并 实现 美观 和 性 能 的 平衡 。 
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了 解 有 关 页 面 速度 的 基础 知识 对 于 网 站 设计 是 非常 重要 的 ， 只 有 这 样 才能 
更 好 地 理解 需要 优化 什么 。 浏 览 器 获取 和 显示 内 容 的 方式 是 非常 稳定 上 且 可 
靠 的 ， 理 解 网 页 是 如 何 泻 染 的 将 有 助 于 你 准确 地 判断 设计 决策 会 对 网 站 的 
页 面 速度 产生 什么 影响 。 我 们 的 目标 是 优化 : 

。 页 面 中 加 载 的 资源 数量 (例如 图 片 、 字 体 、HTML 和 CSS ) 

。 这 些 资 源 的 文件 大 小 

。 用 户 对 网 站 的 感知 性 能 

















除了 用 户 能 够 在 浏览 器 中 看 见 的 这 染 内 容 外 ， 在 后 端 也 可 以 做 进一步 的 优 
化 ， 包 括 优化 服务 器 在 向 客户 端 返回 第 一 个 字 节 之 前 所 做 的 工作 。 还 有 很 
多 因素 会 影响 页 面 的 加 载 速度 ， 但 这 些 因素 并 不 在 网 站 的 前 端 ， 例 如 数据 
库 请 求 ， 或 者 将 模板 编译 成 HTML 等 。 然 而 正如 Steve Souders 所 说 :“ 终 
端 用 户 的 响应 时 间 中 有 80% 到 90% 都 耗费 在 了 前 端 。 在 这 里 我 们 关注 网 
页 在 前 端的 加 载 时 间 ， 因 为 前 端 对 用 户 体验 的 影响 最 大 。 


A i 
2.1 浏览 器 如 何 演 染 内 容 

从 用 户 在 浏览 器 中 输入 你 网 站 的 URL， 到 页 面 开始 加 载 你 的 网 站 设计 ， 这 
期 间 用 户 的 浏览 器 会 同 你 的 服务 器 进行 协商 ， 以 获得 相互 通信 所 需 的 全 部 











数据 。 

首先 ， 浏 览 器 发 出 一 个 获取 内 容 的 请 求 。 当 阐 览 器 首次 向 一 个 新 的 域名 发 
送 请 求 时 ， 它 首先 要 找到 存放 这 个 内 容 的 服务 器 ， 这 个 过 程 叫 作 DNS 查询 
(DNS lookup)。DNS 查询 会 找到 你 的 网 络 主机 在 互联 网 中 所 处 的 位 置 ， 这 
样 狭 取 内 容 的 请 求 才 能 一 路 畅通 地 抵达 服务 器 。 浏 览 器 会 “ 记 住 ”这 个 地 
址 一 段 时 间 (时 间 取 决 于 服务 器 的 DNS 设置 )， 这 样 就 不 需要 每 次 请 求 时 
都 花费 宝贵 的 时 间 来 进行 查询 。 


当 服 务 器 和 用 户 的 浏览 器 建立 连接 并 收 到 首 个 请 求 后 ， 会 对 请 求 进行 解码 
并 定位 浏览 器 所 请 求 的 内 容 ， 因 为 浏览 器 要 演 染 对 应 的 页 面 。 无 论 是 图 像 、 
CSS、HTML 或 者 其 他 种 类 的 资源 ， 服 务 器 都 会 将 内 容 发 送 回去 ， 然 后 浏 
览 器 会 开始 为 用 户 下 载 并 泻 染 页 面 。 图 2-1 说 明了 这 个 通信 的 循环 过 程 。 

































































有 户 浏览 器 






你 的 网 络 主机 
1. 发 送 一 个 内 容 请 求 4 


Ed 2. 解 码 请 求 
4. 泻 染 内 容 定位 内 容 























图 2-1: 加载 页 面 时 用 户 浏览 器 和 内 容 服务 器 之 间 的 循环 过 程 


我 们 会 测量 浏览 器 收 到 响应 内 容 的 第 一 个 字 节 的 时 间 ， 并 将 其 称 作 首 字 节 
响应 时 间 (Time To First Byte，TTFB)。 这 是 一 个 用 来 衡量 网 站 的 后 端 处 理 
并 返回 内 容 的 速度 的 很 好 的 指标 。 对 于 前 端 来 说 ， 即 使 浏览 器 已 经 开始 接 
收 从 服务 器 返回 的 内 容 ， 它 依然 需要 继续 花费 一 定 的 时 间 来 下 载 并 在 页 正 
上 演 染 这 些 内 容 。 浏 览 器 可 以 很 快 地 处 理 并 演 染 某 些 文件 类 型 ， 还 有 些 请 
求 〈 比 如 阻塞 式 的 JavaScript) 则 需要 被 完整 处 理 ， 之 后 用 户 的 浏览 器 才能 
继续 泻 染 其 他 内 容 。 


























这 些 内 容 请 求 的 顺序 和 大 小 是 不 同 的 。 浏 览 器 会 聪明 地 尝试 向 服务 器 并 行 
发 送 这 些 请 求 ， 来 减少 演 染 页 面 所 需 的 时 间 。 但 我 们 依然 可 以 做 很 多 事情 ， 
来 优化 请 求 和 获取 内 容 的 过 程 ， 让 用 户 可 以 尽快 和 网 站 进行 交互 。 





2.1.1 请 求 
优化 用 来 创建 页 面 的 请 求 的 大 小 和 数量 ， 将 会 对 网 站 的 加 载 速度 产生 
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巨大 的 影响 。 为 了 说 明 请 求 如 何 影响 页 面 加 载 速度 ， 我 们 来 看 一 个 用 
WebPagetest (http:/www.WebPagetestorg/) 生成 的 瀑布 图 (第 6 章 中 会 介绍 
如 何 使 用 WebPagetest) 。 图 2-2 所 示 的 瀑布 图 展示 了 请 求 一 个 页 面 的 内 容 所 


消耗 的 时 间 ， 比 如 CSS、 图 片 和 HTML， 以 及 在 浏览 器 显示 这 些 内 容 前 所 
花费 的 下 载 时 间 。 











本 DNS Lookup | 国 Initial Connection | BB SSL Negotiation | Bl Timeto First Byte | 国 Content Download 


1.0 12 1.4 1.6 1.8 20 2.2 2.4 2.6 2.8 3.0 3.2 3.4 





0.2 0.4 0.6 0.8 














图 2-2: 水 平方 向 的 每 一 条 线 代表 一 个 独立 的 资源 请 求 


瀑布 图 中 水 平方 向 的 每 一 条 线 都 代表 一 个 独立 的 资产 请 求 ， 比 如 一 个 
HTML 文件 、 一 个 样式 表 、 一 个 脚本 或 一 张 图 片 。 我 们 的 第 一 个 请 求 通常 
是 HTML 页 面 ， 其 中 包含 DNS 查询 ， 因 为 浏览 器 需要 找到 Web 中 存放 这 
些 内 容 的 位 置 。 随 后 的 每 一 个 请 求 与 文件 所 在 的 服务 器 之 间 将 有 一 个 初始 
连接 时 间 ， 一 段 时 间 后 用 户 的 浏览 器 才 会 收 到 返回 的 第 一 个 字 节 ， 另 外 还 











太后 
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需要 一 定 的 时 间 来 下 载 和 显示 内 容 。 


自然 ， 所 请 求 的 内 容 片 段 越 大 ， 下 载 的 时 间 、 浏 览 器 处 理 的 时 间 以 及 显示 
在 页 面 上 所 需 的 时 间 就 越 长 。 同 样 ， 泻 染 页 面 所 需 的 独立 内 容 片 段 越 多 ， 
页 面 完 全 加 载 所 需 的 时 间 就 越 长 。 这 就 是 我 们 需要 同时 优化 网 站 加 载 所 需 
的 图 片 、CSS 和 JavaScript 文件 的 数量 和 大 小 的 原因 。 














例如 ， 当 处 理 图 片 时 ， 可 以 将 独立 的 图 片 请 求 组 织 到 一 个 单独 的 精灵 
(也 就 是 一 个 图 片 的 集合 ) 中 ， 来 减少 浏览 器 需要 发 起 的 请 求 数量 (我 们 会 
在 3.2.1 节 中 介绍 这 个 技术 )。 我 们 还 可 以 通过 压缩 工具 对 每 一 张 图 片 进行 
处 理 以 减 小 文件 体积 ， 同 时 不 损害 图 片 质量 〈 在 3.1.4 节 中 阅读 更 多 相关 内 
)。 我 们 还 会 关注 如 何 减 少 CSS 和 JavaScript 文件 的 总 数 ， 以 及 如 何以 最 
里 的 顺序 来 加 载 它们 从 而 提升 感知 性 能 ，4.5.1 节 中 会 详细 介绍 。 优 化 浏 
器 加 载 页 面 所 需 的 请 求 的 大 小 和 数量 可 以 提升 网 站 的 速度 。 























涝 中 邓 


212 和 连接 

加 载 页 面 所 需 的 请 求 数量 同 浏览 器 为 获取 这 些 内 容 而 建立 的 连接 数量 不 同 。 
WebPagetest 中 的 连接 视图 (图 2-3) 展示 了 浏览 器 同 服务 器 之 间 的 每 一 条 
连接 ， 以 及 通过 这 些 连接 所 发 送 的 请 求 。 























图 2-3: 连接 视图 展示 了 浏览 器 同 服务 器 之 间 的 每 一 条 连接 ， 以 及 通过 这 些 连 接 所 
发 送 的 请 求 


对 于 每 一 个 连接 ， 都 可 以 看 到 一 次 针对 该 域名 的 DNS 查询 ( 深 绿色 )， 与 
服务 器 的 初始 连接 ( 柳 色 )， 以 及 在 浏览 器 开始 获取 通过 HTTPS 传输 的 内 
容 (粉红 色 ) 之 前 可 能 会 进行 的 SSL 协商 。 但 浏览 器 非常 聪明 ， 在 同 服务 
器 建立 连接 后 会 尝试 对 下 载 内 容 进 行 优化 。 
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什么 是 SSL 协商 ? 

SSL 协商 发 生 在 浏览 器 为 内 容 建 立 安全 连接 的 阶段 ，SSL 也 就 是 加 密 的 
HTTPS 连接 。 用 户 的 浏览 器 同 服务 器 协商 密 钥 和 认证 来 在 彼此 间 建 立 一 条 
安全 连接 。 由 于 SSL 协商 需要 在 浏览 器 和 服务 器 之 间 交 换 数 据 ， 因 此 会 额 
外 增加 页 面 的 加 载 时 间 。 


注意 图 中 的 每 一 行 都 会 有 几 种 不 同类 型 的 文件 被 下 载 。 这 就 是 持续 连接 
(persistent connection) ， 浏 览 器 会 保持 连接 的 打开 状态 以 便 在 其 他 请 求 中 复 
用 该 连接 。 浏 览 器 可 以 在 取 回 JavaScript 文件 后 利用 这 个 已 经 建立 的 连接 来 
获取 一 个 字体 文件 、 一 个 图 片 ， 直 到 不 得 不 建立 一 条 新 的 连接 来 获取 更 多 


同时 可 以 观察 到 浏览 器 (在 这 个 例子 中 是 Chrome) 在 同一 时 间 建 立 了 多 条 
连接 ， 并 行 地 获取 内 容 。 每 个 浏览 器 可 建立 的 并 发 的 持续 连接 的 数量 是 有 
差异 的 。 现 代 浏 览 器 允许 同时 建立 六 条 (Chrome、Firefox、Opera 12) 或 
八条 (Internet Explorer 10) 并 发 连接 。 






































了 解 加 载 页 面 所 需 的 连接 数量 是 非常 重要 的 。 如 果 你 发 现 加 载 你 的 页 面 
需要 很 多 连接 ， 说 明 你 的 网 站 内 容 被 分 散在 过 多 的 域名 中 ， 这 样 浏 览 器 
就 无 法 对 已 经 建立 的 连接 进行 优化 。 请 求 过 多 的 第 三 方 脚本 可 能 会 导致 


这 个 问题 。 














借助 瀑布 图 可 以 通过 测量 页 面 整体 的 大 小 和 感知 性 能 来 估算 页 面 的 综合 加 
载 性 能 。 在 第 6 章 中 会 更 详细 地 介绍 WebPagetest 的 课 布 图 ， 以 及 如 何 查找 
有 问题 的 内 容 加 载 。 


2.2 页面 大 小 

加 载 页 面 所 需 的 HIML、 图 片 和 其 他 内 容 的 文件 大 小 会 对 页 面 加 载 的 总 时 
间 产 生 影响 。 使 用 浏览 器 插件 YSlow 可 以 测量 每 种 内 容 的 文件 大 小 。 我 们 
来 简要 介绍 一 下 如 何 使 用 YSlow。 



































在 页 面 上 运行 YSlow 后 ， 切 换 到 Components 标签 页 (图 2-4) 来 查看 这 个 
页 面 中 的 内 容 列 表 ， 列 表 展 示 了 内 容 的 类 型 和 大 小 。 
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iType 器 EE 
-| doc (1) 3.4K 

doc 3.4K 1.5K 
is 40.1K 

js 40.1K 15.8K 
-| ¢ss (1) 4.8K 

CSS 4.8K 1.5K 
十 | cssimage (1) 11.5K 
十 | image (6) 722.6K 
十 | favicon (1) 2.0K 



































图 2-4: 在 YSlow 中 的 Components 标签 页 可 以 看 到 这 个 页 面 中 的 内 容 类 型 、 内 容 
大 小 的 列表 


在 这 个 例子 中 ， 可 以 看 到 启用 gzip 减少 了 HTML (表格 中 的 doc 一 项 )、 
JavaScript 和 CSS 文件 的 大 小 。 如 果 你 好 奇 gzip 是 如 何 工作 的 ， 我 们 会 在 
4.5.2 节 中 介绍 。 同 时 可 以 发 现 尽 管 加 载 页 面 只 需要 6 个 图 片 文件 ， 但 是 它 
们 的 大 小 达到 了 722.6 KB ! 这 些 图 片 非常 大 。 “cssimage” 这 一 行将 所 有 通 
过 CSS 来 请 求 并 应 用 的 图 片 同 直接 内 栋 在 HTML 页 面 中 的 图 片区 分 开 来 。 









































查看 一 下 你 自己 的 页 面 大 小 ， 然 后 同 http://httparchive.org/interesting. 
php 中 的 “页 面 平均 字 节 ”图 表 进 行 对 比 。 你 是 否 使 用 了 过 多 的 CSS 或 
JavaScript ?页 面 中 细 分 的 内 容 类 型 是 什么 样 的 一 一 图 片 的 大 小 是 否 如 前 面 
的 例子 中 那样 明显 超过 其 他 类 型 内 容 ， 还 是 有 其 他 的 异常 ? 























什么 是 HTTP Archive ? 


HTTP Archive 是 一 个 固定 存放 页 面 性 能 信息 的 地 方 ， 诸 如 页 面 大 小 、 失 
败 的 请 求 和 使 用 的 技术 等 。 它 收集 了 Alexa 前 250 000 名 网 站 的 URL 的 
WebPagetest 信息 。 





关于 页 面 大 小 并 没有 硬性 规定 ， 但 是 长 期 跟踪 页 面 的 大 小 是 非常 重要 的 ， 
这 样 可 以 确保 在 页 面 改 版 和 引入 更 多 内 容 ， 或 设计 和 迭代 时 不 会 发 生 巨大 和 
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意料 之 外 的 改变 。 我 们 会 在 6.4 节 中 详细 介绍 网 站 页 面 大 小 和 加 载 时 间 的 测 
量 和 迭代 。 


审视 页 面 的 总 大 小 和 细 分 的 内 容 种 类 时 ， 要 兼顾 加 载 页 面 所 需 的 请 求 数量 
和 页 面 的 感知 性 能 。 演 染 页面 所 需 的 内 容 总 数 将 直接 影响 用 户 加 载 所 需 的 
时 间 一 一 越 小 越 好 。 


2.3 ”感知 性 能 


网 站 加 载 的 感知 速度 比 实 际 的 速度 更 重要 。 用 户 的 感知 速度 主要 基于 开始 
在 页 面 上 看 见 内 容 谊 染 的 速度 ， 页 面 变 得 可 以 交互 的 速度 ， 以 及 网 站 滚动 
的 流畅 程度 。 


2.3.1 关键 泻 染 路 径 

当 用 户 开始 加 载 页面 时 ， 首 先 出 现 的 是 空白 。 空 白 网 页 是 一 种 很 糟糕 的 用 
户 体验 ， 用 户 会 感觉 什么 都 没有 发 生 。 为 了 解决 这 个 用 户 体验 问题 ， 你 需 
要 优化 你 的 关键 澄 染 路 径 。 




















为 了 了 解 关 键 泻 染 路 径 的 工作 原理 ， 你 需要 首先 了 解 浏 览 器 如 何 通 过 读 取 
页 面 中 的 HTML、CSS 和 JavaScript 来 进行 可 视 化 泻 染 。 浏 览 器 首先 会 创 
建文 档 对 象 模型 (Document Object Model，DOM)。 浏 览 器 从 服务 器 取 回 
HTML 后 会 对 其 进行 解析 : 原始 字 节 变 成 字符 ， 字 符 组 成 的 字符 串 变 成 诸 
如 <body> 这 样 的 标记 ， 标 记 变 成 拥有 属性 和 规则 的 对 象 ， 最 终 这 些 对 象 互 
相 联系 在 一 起 变 成 一 种 特定 的 数据 结构 。 最 后 一 步 就 是 创建 DOM 树 ， 训 览 
器 对 页 面 的 进一步 处 理 完全 依赖 于 它 。 



































在 浏览 器 读 取 HTML 的 过 程 中 ， 可 能 会 遇 到 样式 表 。 浏 览 器 会 暂停 所 有 
事情 ， 并 向 服务 器 请 求 这 个 文件 。 当 接收 到 文件 后 ， 浏 览 器 会 进行 一 个 同 
前 面 类 似 的 流程 : 原始 字 节 变 成 字符 ， 字 符 串 组 成 标记 ， 标 记 变 成 对 象 ， 
对 象 互相 联系 在 一 起 变 成 一 个 树 结构 ， 最 终 我 们 得 到 一 个 CSS 对 象 模型 
(CSS Object Model, CSSOM), 








接 下 来 ， 浏 览 器 将 DOM 和 CSSOM 组 合 在 一 起 来 创建 演 染 桂 ， 演 染 树 用 来 
计算 所 有 可 见 元 素 的 大 小 及 位 置 。 演 染 树 中 只 包含 泻 染 页 面 所 必需 的 内 容 





18 | 第 2 章 

















最 终 的 渲染 树 显示 在 屏幕 上 。 











浏览 器 经 过 这 个 过 程 为 用 户 将 内 容 显 示 在 屏幕 上 ， 这 个 过 程 就 叫 作 关键 





染 路 径 。WebPagetest 中 的 “Start Render” 指 标 是 观察 用 户 需 要 多 久 才 色 





看 见 网 站 加 载 的 方式 之 一 ， 它 可 以 告诉 你 浏览 器 需要 多 少 秒 才 能 开始 泻 : 
内 容 。 





























(因此 所 有 display: none 的 元 素 都 不 会 包含 在 泻 染 树 中 )。 最 后 ， 浏 览 器 将 


演 


能 




















以 0.5 秒 为 间隔 ， 观 察 Yahool 的 首页 可 以 发 现 ， 加 载 开 始 大 约 2 秒 后 页 
还 是 一 片 空白 。 页 面 上 显示 可 见 内 容 的 时 间 越 时 ， 用 户 感觉 到 的 页 面 速 














说 明 

WebPagetest 的 测试 结果 随 着 地 区 、 浏 览 器 、 连 接 速 度 和 其 他 因素 的 不 
同 而 有 所 差异 。 以 0.5 秒 的 间隔 来 观察 Yahoo! 首 页 的 加 载 情况 很 简单 ， 
你 也 可 以 在 WebPagetest 的 幻灯 片 视图 中 将 间隔 时 间 设 置 为 0.1 秒 来 观察 
自己 的 网 站 。 


有 一 些 方法 可 以 优化 关键 泻 染 路 笃 。 由 于 默认 情况 下 CSS 会 被 当 作 阻 寨 ; 

















染 的 资源 来 处 理 ， 可 以 使 用 媒体 类 型 和 媒体 查询 来 标识 CSS 的 某 些 部 分 
非 阻塞 演 染 的 : 





<link href="main.css" rel="stylesheet"> 

<Link href="print.css" rel="stylesheet" media="print"> © 

<link href="big-screens.css" rel="stylesheet" 
media="(min-width: 61.5em)"> @ 


图 2-5: 通过 WebPagetest 的 幻灯 片 视图 可 以 观察 随 着 页 面 的 加 载 屏 幕 内 容 的 变化 








下 
度 








泻 


为 
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@ 这 个 样式 只 有 在 打印 页 面 时 才 会 生效 。 它 在 页 面 首次 加 载 时 不 会 阻塞 

@ 这 个 样式 只 有 浏览 器 的 宽度 大 于 等 于 61.5 em 时 才 会 生效 。 当 浏览 器 袖 
度 小 于 61.5 em 时 它 不 会 阻塞 泻 染 ， 但 当 浏览 器 宽度 满足 mn-wtdth 的 
条 件 时 会 阻塞 演 染 。 






































另外 一 个 优化 关键 演 染 路 径 的 方法 是 确保 JavaScript 以 尽 可 能 高 效 的 方式 加 
载 。JavaScript 会 阻塞 DOM 的 构建 ， 除 非 它 被 声明 为 异步 加 载 ， 参 见 4.5.1 
节 ， 详 细 了 解 如 何 让 JavaScript 不 阻塞 页 面 泻 染 。 

















想 更 深入 地 了 解 关键 路 径 对 网 站 感知 性 能 的 影响 ” WebPagetest 还 给 你 的 页 
面 提 供 了 一 个 叫 作 “Speed Index” (https://sites.google.com/a/webpagetest.org/ 
docs/using-webpagetest/metrics/speed-index) 的 指标 。 根 据 WebPagetest 的 文 
档 ，Speed Index 是 页 面 上 可 见 内 容 被 展示 出 来 所 需 的 平均 时 间 。 它 以 毫秒 
为 单位 ， 并 且 依 赖 于 所 选 视 口 的 大 小 。 


当 你 想 要 测量 页 面 的 感知 性 能 时 ，Speed Index 指标 是 非常 好 的 选择 ， 因 为 
它 可 以 告诉 你 “第 一 屏 ” 内 容 需 要 多 久 才 能 展示 给 用 户 。 关 注 用 户 需要 多 
久 才 能 看 见 并 且 和 内 容 进行 交互 ， 比 仅仅 关注 浏览 器 需要 多 久 才能 完整 加 
载 整 个 页 面 (包括 文档 被 完整 展示 后 ， 所 有 异步 内 容 都 加 载 并 执行 完成 ) 
更 重要 。 在 第 6 章 中 可 以 阅读 更 多 关于 WebPagetest 如 何 测量 Speed Index 
以 及 页 面 完整 加 载 所 需 时 间 的 内 容 。 























可 交互 时 间 (Time To Interactivity，TTI) 指 的 是 从 用 户 来 到 一 个 页 面 ， 到 
可 以 完成 诸如 点 击 链 接 、 搜 索 或 播放 视频 等 交互 操作 所 需 的 时 间 。 有 数 种 
方法 可 以 通过 优化 关键 演 染 路 径 ， 来 提升 页 面 加 载 并 变 得 可 交互 的 速度 : 


。 异步 加 载 内 容 

。 提高 “第 一 屏 ” 内 容 请 求 的 优先 级 

。 遵循 CSS 和 JavaScript 加 载 的 最 佳 实践 (在 4.5.1 节 中 有 详细 内 容 ) 
。 为 再 次 访问 网 站 的 用 户 缓存 资源 (在 4.5.3 节 中 有 详细 内 容 ) 

。 确保 页 面 上 的 主要 功能 尽快 对 用 户 可 用 


通过 将 关键 演 染 路 径 和 页 面 加 载 的 其 他 方面 一 同 优化 ， 可 以 确保 网 站 的 加 
载 速度 给 用 户 留 下 好 印象 。 
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2.3.2 卡 顿 

当 你 滚动 一 个 网 页 时 ， 有 没有 注意 到 断断续续 或 者 是 画面 跳跃 的 情况 ? 这 
些 现象 统称 为 卡 顿 ， 当 浏览 器 的 泻 染 速度 低 于 每 秒 60 帧 时 就 会 发 生 卡 顿 。 
卡 顿 会 使 用 户 体验 下 降 ， 并 且 会 使 用 户 对 网 站 的 感知 性 能 不 满 。 




















断断续续 是 由 于 浏览 器 试图 在 页 面 上 绘制 更 新 。 改 变 一 个 元 素 的 视觉 属性 
(比如 背景 、 颜 色 、 边 框 半 径 或 阴影 ) 会 引起 浏览 器 进行 绘制 。 用 户 改 变 页 
面 元 素 可 见 性 的 操作 也 会 引起 绘制 ， 比 如 显示 或 隐藏 某 些 内 容 ， 或 者 点 击 
一 个 轮 播 的 内 容 。 当 内 容 改变 时 ， 浏 览 器 会 “ 重 绘 ”显示 器 上 的 部 分 画面 


Ho 














值 。 例 如 ， 现 代 浏 览 器 能 以 高 于 每 秒 60 帧 的 速度 处 理 茶 些 动画 (比如 位 
移 、 缩 放 、 旋 转 和 透明 度 等 )， 而 其 他 动画 则 可 能 会 产生 卡 顿 。 对 浏览 器 来 
说 重 绘 是 成 本 非常 高 郧 的 操作 ， 并 且 会 让 人 感觉 页 面 加 载 非 常 缓慢 。 


重 绘 有 时 会 对 浏览 器 泻 染 产生 巨大 影响 ， 使 泻 染 速度 低 于 每 秒 60 帧 的 国 





如 果 你 发 现 网 站 出 现 了 卡 顿 的 迹象 ， 有 一 些 浏览 器 工具 可 以 帮助 你 寻找 症 
结 所 在 。Chrome 开发 者 工具 中 有 一 个 Timeline 视图 (图 2-6)， 展 示 了 当 你 
同 页 面 进行 交互 时 浏览 器 演 染 的 帧 率 。 
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图 2-6: Chrome 开发 者 工具 的 Timeline 视图 展示 了 当 你 同 页 面 进行 交互 时 浏览 器 
泻 染 的 帧 率 








当 你 点 击 “record” 并 开始 同 页 面 交 互 时 ，Chrome 开发 者 工具 会 记录 每 秒 
的 帧 数 ， 以 及 浏览 器 在 做 什么 ， 比 如 重 计算 样式 、 触 发 事件 或 绘制 。 当 你 
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发 现 某 个 区 域 的 泻 染 帧 率 低 于 每 秒 60 帧 的 国 值 时 ， 就 可 以 有 针对 性 地 对 该 
区 域 减 少 重 绘 。 首 先 通 过 隐藏 页 面 中 该 区 域 的 元 素来 查找 造成 卡 顿 的 原因 ， 
接 下 来 可 以 尝试 通过 隐藏 颜色 、 阴 影 和 动画 来 查找 造成 网 页 缓慢 的 根本 原 
因 。 在 6.1.2 市 阅读 更 多 关于 如 何 使 用 Chrome 开发 者 工具 的 内 容 。 


就 网 站 的 感知 性 能 而 言 ， 要 确保 有 人 定期 在 不 同 的 地 区 用 不 同 的 设备 对 页 
面 进 行 测 试 。 你 是 否 可 以 很 快 地 完成 该 页 面 上 的 主要 操作 ? 是 否 感觉 你 的 
网 站 很 慢 ? 是 否 发 现在 某 些 浏览 器 或 移动 设备 上 网 页 缓慢 ?进行 用 户 测 试 
同样 可 以 帮助 你 确定 页 面 上 的 哪个 区 域 需要 以 最 快 的 速度 加 载 ， 以 及 哪个 
区 域 需要 进一步 优化 来 改善 感知 性 能 和 关键 泻 染 路 径 。 

如 果 你 发 现 用户 由 于 加 载 时 页 面 空白 时 间 过 长 ， 或 者 没有 耐心 等 待 某 个 区 
域 变 成 可 点 击 状态 而 感觉 网 站 很 慢 的 话 ， 可 以 优化 加 载 顺序 和 页 面 请 求 的 
大 小 。 如 有 果 网 站 第 一 屏 页 面 能 够 更 快 地 变 成 可 交互 状态 ， 更 快 地 将 内 容 显 
示 出 来 ， 网 站 的 感知 性 能 就 会 提升 ， 从 而 带 来 更 好 的 用 户 体验 。 


2.4 影响 页 面 速度 的 其 他 因素 


除了 你 可 以 控制 的 性 能 因素 外 ， 还 有 一 些 环境 因素 也 会 对 网 站 的 页 面 加 载 
速度 产生 影响 ， 包 括 用 户 的 地 理 位 置 、 网 络 和 浏览 器 。 















































2.4.1 ”地理 位 置 

用 户 的 地 理 位 置 对 于 页 面 加 载 的 总 时 间 可 能 会 有 非常 大 的 影响 。 如 果 用 
WebPagetest 等 测试 工具 在 不 同 的 地 理 位 置 进行 测试 ， 你 会 发 现 加 载 时 间 不 
尽 相 同 。 这 是 由 于 浏览 器 请 求 和 接收 信息 都 是 通过 物理 网 络 进行 的 ， 而 内 
容 进 行 长 距离 传输 的 速度 是 有 极限 的 ， 用 户 的 浏览 器 距离 服务 器 越 远 ， 通 
信 所 需 的 时 间 也 就 越 长 。 如 果 一 名 澳大利亚 用 户 访问 你 在 美国 的 服务 器 ， 
所 需 的 时 间 会 比美 国 本 土 用 户 长 很 多 。 












































这 也 是 为 什么 服务 全 球 用 户 的 网 站 会 使 用 内 容 分 发 网 络 (Content Delivery 
Network，CDN)。CDN 会 在 全 世界 搭建 具有 相同 内 容 的 服务 器 ， 因 此 用 户 
可 以 通过 访问 距离 最 近 的 服务 器 来 节省 时 间 。 比 如 对 于 例子 中 的 澳大利亚 
用 户 来 说 ， 你 可 以 考虑 通过 位 于 亚太 地 区 的 CDN 来 提供 内 容 ， 这 样 用 户 就 
可 以 通过 距离 他 们 更 近 的 服务 器 来 获取 内 容 了 。 
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2.4.2 网络 


用 户 的 带宽 可 能 是 有 限 的 ， 或 者 在 给 定时 间 段 内 用 户 可 以 使 用 的 带宽 是 有 
上 限 的 ， 这 取决 于 用 户 的 地 理 位 置 。 用 户 所 在 地 区 的 网 络 基础 设施 并 不 一 
定 同 你 用 来 测试 网 站 的 基础 设施 一 样 稳定 或 快速 。 记 住 一 点 ， 测 试 并 不 能 
代表 实际 的 用 户 体验 ， 因 为 你 使 用 的 网 络 基 础 设施 可 能 明显 更 好 ， 连 接 速 
度 更 快 ， 使 用 的 设备 也 可 能 更 强大 。 

















同样 ， 用 户 的 网 络 情况 对 于 每 一 个 内 容 请 求 所 需要 的 时 间 可 能 会 有 显著 的 
影响 。 在 一 个 慢 速 的 网 络 中 ， 用 户 浏 览 器 找到 服务 器 并 与 之 建立 初始 连接 
耗 时 会 更 长 ， 下 载 内 容 也 会 耗 时 更 长 。 随 着 浏览 器 为 这 娄 页 面 所 需 的 请 求 
数量 的 增加 ， 这 个 耗 时 会 成 倍 地 增加 。 移 动 网 络 是 网 络 延迟 的 好 例子 ， 阅 
读 1.2.1 市 详细 了 解 由 此 所 带 来 的 挑战 。 


2.4.3 ”浏览 

用 户 的 浏览 器 也 会 影响 网 站 的 感知 性 能 ， 因 为 每 个 浏览 器 处 理 请 求 和 演 染 
内 容 的 方式 都 有 些许 差异 。 不 支持 渐进 式 JPEG (将 在 3.1.2 节 介 绍 ) 的 浏 
览 器 在 显示 渐进 式 JPEG 的 图 片 时 必须 等 待 图 片 下载 完 成 ， 这 上 比 直 接 展 示 基 
线 式 JPEG 感觉 要 慢 很 多 。 与 支持 更 多 并 发 连接 的 新 式 浏览 器 相 比 ， 支 持 少 
量 并 发 连接 的 浏览 器 在 请 求 和 演 染 内 容 时 要 更 慢 。 


所 有 这 些 环境 因素 都 是 你 无 法 控制 的 。 然 而 ， 认 真 地 优化 网 站 加 载 速度 ， 
并 定期 在 不 同 的 地 点 和 设备 上 测试 网 站 的 性 能 ， 将 有 助 于 你 为 用 户 创 造 最 
佳 的 用 户 体验 。 


下 一 章 中 ， 我 们 将 研究 在 多 数 网 站 中 体积 最 大 的 内 容 : 图 片 。 时 刻 谨 记 图 
片 的 格式 和 压缩 是 非常 重要 的 ， 尤 其 是 现在 你 已 经 了 解 了 页 面 大 小 和 请 求 
会 影响 页 面 的 整体 加 载 速度 。 优 化 图 片 的 大 小 和 用 户 浏览 器 泻 染 图 片 的 方 
式 ， 网 站 的 用 户 体验 就 会 更 好 。 
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优化 图 片 





图 片 是 大 多 数 网 站 的 页 面 总 体积 中 占 比 最 大 的 资源 。 去 年 ， 在 图 片 请 求 
数量 增长 很 少 的 前 提 下 ， 普 通 页 面 中 图 片 文件 的 大 小 增长 了 30% 以 上 
(https://blogs.akamai.com/2013/11/extreme-image-optimization-webp-jpeg-xr- 
in-aqua-ion.html)。 由 于 普通 页 面 中 图 片 文件 的 数量 和 体积 都 很 大 (图 3-1)， 
优化 图 片 党 无 争议 地 成 为 了 改进 页 面 加 载 速度 的 最 佳 切 人 点 。 








每 个 页 面 上 每 种 内 容 类 型 的 平均 字 节 数 
脚本 -276KB a4 KB 


村 
Flash-87 KB 
一 其 他 -147 KB 


HTML-57 KB 


















图 片 -1030 KB 


国 总 计 1701 KB 











图 3-1: HTTPArchive.org (http://httparchive.org/interesting.php) 关于 页 
面体 积 的 调查 显示 ， 图 片 在 大 多 数 网 站 的 页 面 总 体积 中 占 比 较 大 


通过 以 下 途径 ， 可 以 显著 优化 网 页 内 容 中 的 主要 图 片 以 及 用 来 装饰 的 各 种 
图 片 : 
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。 平衡 每 张 图 片 的 文件 大 小 和 质量 


。 找到 减少 网 站 中 图 片 请 求 总 数 的 方法 
。 优化 网 站 图 片 的 创作 流程 以 改进 性 能 





我 们 从 可 用 的 各 种 图 片 格式 开始 讨论 ， 然 后 再 





以 便 提 升 页 面 加 载 速度 。 


3.1 图 片 格式 的 选择 


为 网 站 创作 图 片 时 ， 有 很 多 





几 个 问题 。 











。 在 不 对 质量 造 





成 明显 影响 的 前 提 下 ， 


。 需要 多 少 种 颜色 ? 
。 有 办 法 简化 这 个 图 片 吗 ? 


。 需要 透明 吗 ? 
。 需要 动画 吗 ? 




















研究 一 下 优化 图 片 的 方法 ， 





图 片 格式 可 供 选择 。 生 成 图 片 时 ， 问 自己 以 下 








图 片 能 被 压缩 到 什么 地 步 ? 





。 这 个 图 片 显示 时 最 大 的 宽 和 高 是 多 少 ? 
。 这 张 图 片 在 网 站 中 的 复 用 性 如 何 ? 





网 络 中 最 常用 的 














主流 图 片 格式 的 适用 场景 和 优化 建议 。 


表 3-1: 图 片 格式 概览 
格式 。 ”最 佳 使 用 场景 优化 选项 























图 片 格式 是 JPEG、GIF 和 PNG。 表 3-1 简要 说 明了 每 一 种 





JPEG 。 有 多 种 颜色 的 图 片 、 照 片 降低 质量 ， 输 出 为 渐进 式 格式 ， 降 品 

GIF 动画 减少 抖动 ， 减 少 颜 色 数量 ， 增 强 横向 模式 ， 降 低 纵 
向 噪点 

PNG-8 ”颜色 较 少 的 图 片 减少 抖动 ， 减 少 颜 色 数量 ， 增 强 横向 和 纵向 模式 

PNG-24 ”部 分 透明 的 图 片 降 品 ， 减 少 颜色 数量 

下 面 详 细 介绍 每 种 图 片 格式 的 优 缺 点 ， 以 及 如 何 输出 和 优化 它们 。 

3.1.1 JPEG 














JPEG 是 照片 以 及 其 他 含有 大 量 颜色 的 


图 片 的 














E 想 格式 。JPEG 可 以 通过 多 
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种 途径 压缩 ， 而 不 会 产生 视觉 上 明显 可 感知 的 质量 损失 。 在 低 质量 情况 下 ， 
JPEG 图 片 会 出 现 明显 的 修饰 痕迹 、 波 纹 和 颗粒 感 ， 因 为 它 是 有 损 压 缩 格 
式 。 有 损 图 片 格式 在 保存 时 会 丢弃 一 部 分 信息 。JPEG 通过 使 用 一 种 基于 人 











类 看 见 和 感知 信息 的 方式 的 算法 ， 


“修饰 痕迹 ”是 什么 ? 











来 决定 要 丢弃 哪 一 部 分 信息 。 


修饰 痕迹 是 指 某 个 区 域内 清晰 度 的 损失 。 修 饰 痕迹 可 能 导致 图 片 看 起 来 模 


糊 或 有 马赛 克 。 


JPEG 擅 于 丢弃 处 于 平 请 渐变 和 低 


























图 片 ， 通 常 更 适合 采用 其 他 的 图 片 格式 (比如 PNG)， 因 为 这 样 的 JPEG 图 


对 比 度 区 域 的 信息 。 相 邻 像 素 差 异 较 大 的 





片 会 有 很 明显 的 修饰 痕迹 。 但 由 于 JPEG 图 片 最 大 的 优点 是 包含 丰富 的 信 
息 ， 同 时 体积 较 小 ， 因 此 网 络 上 有 大 量 JPEG 格式 的 图 片 也 就 不 足 为 奇 了 。 

















JPEG 文件 的 优秀 算法 可 以 将 复杂 
化 页 面 加 载 时 间 的 目标 之 一 。 




















借助 Photoshop 中 的 “保存 为 网 页 格式 ”功能 ， 可 以 对 生成 的 任意 一 张 图 





图 像 压 缩 为 体积 较 小 的 文件 ， 这 是 我 们 优 




















片 ， 对 比 多 种 质量 和 文件 格式 。 你 的 目标 是 找到 可 接受 的 质量 与 文件 大 小 。 
关注 文件 体积 在 何 种 压缩 等 级 中 会 产生 可 感知 的 质量 损失 是 很 重要 的 。 注 
意 修饰 痕迹 、 元 素 之 间 对 比 度 的 混乱 ， 以 及 模糊 的 细节 和 文字 。 


在 图 3-2 中 ， 展 示 了 同一 张 图 片 通过 Photoshop 的 “保存 为 网 页 格式 ”功能 


所 生成 的 数 种 质量 效果 。 对 比 输 





质量 为 25、50、75 和 100 的 图 像 ， 可 以 


发 现 质量 越 低 ， 图 像 中 高 对 比 度 部 分 的 边缘 出 现 的 修饰 痕迹 越 多 。 

















PL 
上 


图 3-2: 对 比 用 Photoshop 的 “保存 为 网 页 格式 ”工具 导出 的 图 像 的 质量 ， 
质量 低 的 JPEG 图 像 在 高 对 比 度 部 分 的 边缘 修饰 痕迹 更 明显 ， 比 如 
顶部 白色 叶片 和 周围 绿 背 景 的 交界 处 





为 什么 要 使 用 “保存 为 网 页 格式 ”? 

在 Photoshop 中 主要 有 两 种 生成 图 像 的 方式 :“ 保 存 为 网 页 格式 ”工具 和 
“另存 为 "。 同 “另存 为 ”不 同 ,， “保存 为 网 页 格式 ”会 为 生成 的 图 像 文 件 提 
供 更 多 的 优化 ， 同 时 允许 你 调整 图 像 的 质量 ， 并 在 保存 之 前 进行 预览 。“ 保 
存 为 网 页 格式 ”可 以 帮助 你 在 图 像 的 视觉 效果 和 文件 体积 之 间 找 到 平衡 点 。 


JPEG 图 像 中 不 同 的 颜色 越 多 ， 文 件 的 体积 也 就 越 大 ， 因 为 JPEG 的 算法 很 
难 找到 在 哪些 区 域 可 以 很 容易 地 进行 颜色 的 压缩 和 混合 。 噪 点 和 纹理 会 显 
著 增加 JPEG 文件 的 体积 ， 如 图 3-3 所 示 。 在 创建 新 图 像 时 (特别 是 创建 重 
复 的 图 案 时 )， 对 于 引入 颜色 的 数量 需要 非常 谨慎 。 


噪点 数量 : 5% 噪点 数量 : 5% 噪点 数量 : 10% 噪点 数量 ，10% 
到 像 质 量 : 50% 图 像 质 量 : 75% 到 像 质 量 : 50% 如 像 质 量 : 75% 
文件 体积 : 1.56 KB 文件 体积 : 4.83 KB ”文件 体积 : 2.98 KB 文件 体积 : 9.02 KB 


图 3-3: JPEG 图 像 中 噪点 、 质 量 和 最 终 文件 体积 的 对 比 
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在 图 3-3 中 可 以 看 到 一 组 对 比 结果 ， 这 些 图 片 都 是 通过 Photoshop 的 “保存 
为 网 页 格式 ”工具 导出 并 使 用 ImageOptim 压缩 过 的 。 在 3.1.4 节 中 可 以 陪 
读 更 多 关于 压缩 工具 的 内 容 。 原 始 图 片 是 在 Photoshop 中 利用 噪点 滤 镜 生成 
的 一 个 蓝 色 方块 。 左 边 的 两 个 图 片 添加 了 5% 的 噪点 ， 右 边 的 两 个 添加 了 
10% 的 噪点 。 









































通过 对 比 可 以 发 现 ， 图 片 中 的 噪点 越 少 ， 图 片 的 文件 体积 也 越 小 ; 添加 了 
10% 噪点 的 图 片 文件 体积 几乎 两 倍 于 添加 了 5% 噪点 的 图 片 。 同 时 ，JPEG 
质量 对 文件 总 体积 也 有 影响 。 在 优化 页 面 加 载 速 度 时 ， 需 要 同时 关注 JPEG 
的 噪点 和 质量 ， 并 找到 图 片 中 可 以 优化 的 空间 。 






































选择 JPEG 类 型 也 可 以 影响 网 站 载 入 速度 的 感知 性 能 ( 详 见 2.3 节 )。 基 线 
JPEG 文件 (网 络 上 最 常见 的 种 类 ) 是 全 分 辩 率 的 图 片 ， 由 对 图 片 从 顶部 至 
底部 的 扫描 所 组 成 。 渐 进 式 JPEG 是 由 一 系列 质量 递增 的 扫描 组 成 的 。 























由 于 基线 JPEG 文件 对 图 片 进行 从 顶 至 底 的 扫描 ， 所 以 在 浏览 器 中 是 一 行 一 
行 逐 渐 显 示 出 来 的 。 另 一 方面 ， 渐 进 式 JPEG 图 片 则 是 以 低 清晰 度 形式 马上 
显示 出 来 ， 然 后 逐渐 变 得 更 加 清晰 。 渐 进 式 JPEG 显得 比 基 线 JPEG 加 载 得 
更 快 ， 因 为 它 会 用 低 清 晰 度 的 图 片 一 次 性 填充 满 所 需 的 全 部 空间 ， 而 不 是 
一 块 一 块 地 加 载 。 


渐进 式 JPEG 可 以 在 所 有 的 浏览 器 中 显示 ， 但 不 是 所 有 的 浏览 器 都 能 如 我 
们 所 期 望 的 那样 快速 地 演 染 它 。 在 不 支持 渐进 式 泻 染 的 浏览 嚣 中， 渐进 式 
JPEG 会 显示 得 更 慢 ， 因 为 它 不 能 进行 渐进 式 的 加 载 ， 而 是 必须 在 完全 加 
载 后 才能 显示 。 在 这 种 情况 下 ， 它 会 比分 阶段 加 载 的 基线 JPEG 显示 得 更 
慢 。 可 以 在 PerfPlanet 的 文章 “渐进 式 JPEG: 一 个 新 的 最 佳 实践 ”(http:// 
calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/) 中 阅读 更 
多 关于 渐进 式 JPEG 浏览 器 支持 的 内 容 。 


选择 JPEG 类 型 时 ， 另 一 个 要 学 虑 的 因素 是 CPU 使 用 率 。 渐 进 式 JPEG 每 
次 扫描 所 需要 的 CPU 电力 ， 差 不 多 是 泻 染 一 张 完整 的 基线 JPEG 所 需 的 量 。 
这 对 移动 设备 来 说 可 能 是 一 个 不 好 的 消息 。 目 前 移动 版 Safari 浏览 器 不 会 
以 渐进 的 方式 演 染 渐进 式 JPEG， 这 是 为 了 降低 CPU 能 耗 所 做 的 考量 。 然 
而 ， 其 他 移动 浏览 器 ， 如 Android 上 的 Chrome 浏览 器 ， 会 对 它们 进行 渐进 
式 泻 染 。 总 体 上 ， 渐 进 式 JPEG 文件 仍然 是 改善 用 户 整体 体验 的 优异 选择 ， 
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而 CPU 能 耗 方面 的 缺点 ， 未 来 可 能 会 通 


如 果 你 想 测 试 将 现 有 的 基线 JPEG 转换 为 渐进 式 JPEG， 可 以 使 用 SmushIt 
(http://www.smushit.com/) 等 工具 。 在 Photoshop 的 “保存 为 网 页 格式 ”对 
话 框 中 ， 勾 选 右 上 区 域 Quality 选择 器 附近 的 Progressive 复 选 框 ， 就 可 以 从 
头 创建 渐进 式 JPEG 了 (图 3-4)。 


过 浏览 器 厂商 而 得 到 改善 。 

















4 
员 


[一 


| High Quality: (75 i$ 
[el Progressive Blur: 0 1$]| 
Optimized Matte: 条 | 


DD Embed Color Profile 











图 3-4: 在 Photoshop 的 “保存 为 网 页 格式 ”对 话 框 中 ， 勾 选 Progressive 
复 选 框 创建 渐进 式 JPEG 


最 后 ， 确 保 用 压缩 工具 对 Photoshop 中 输出 的 图 像 进行 压缩 。 在 不 损失 或 损 
失 很 少 质量 的 前 提 下 ， 可 以 获得 体积 更 小 的 文件 。 阅 读 3.1.4 市 可 以 获得 关 
于 压缩 工具 和 工作 流 相关 的 建议 。 
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3.1.2 GIF 


GIF 是 Web 上 最 古老 的 图 像 文件 格式 之 一 。GIF 在 1987 年 被 创造 出 来 ， 最 
初 被 用 来 在 一 个 文件 中 存储 多 张 位 图 。 得 益 于 对 动画 的 支持 ， 它 在 出 现 很 
久之 后 又 再 度 流行 起 来 。 除 了 动画 ，GIF 同样 支持 透明 度 ， 但 是 每 帧 最 多 
只 能 包含 256 色 。 如 果 GIF 中 有 动画 ， 每 一 帧 中 的 256 色 的 色 盘 可 以 是 不 
同 的 。 与 JPEG 不 同 ，GIF 是 一 种 无 损 文 件 格式 。 


下 面 两 种 少见 的 情况 中 ， 你 可 以 考虑 使 用 GIF 图 像 文件 格式 : 


同样 的 图 像 输 出 为 GIF 时 比 输出 为 PNG-8 时 体积 小 
动画 不 能 用 CSS3 替代 





























入 | 























当 需 要 平衡 GIF 文件 的 视觉 效果 和 文件 体积 时 ， 有 几 个 选项 可 以 使 用 。 首 
先 ， 在 “保存 为 网 页 格式 ”工具 中 可 以 设置 村 动量 以 及 颜色 数 ， 如 图 3-5 
所 示 。 
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Preset: | [Unnamed} 


[a 习 








| selective :| Colors:|40 加 | 
[ Diffusion $] Dither: [100% 14] 
口 Transparency Matte: | Ea 
No Transparency Di... 3 Amount 
DD Interlaced Web Snap: [ok 
Lossy: |0 1$ | 
[el Convert to sRGB 
Preview: | Monitor Color 3 








Color Table 





40 | 日 |@| 人 a 国 | 名 














图 3-5: 在 Photoshop 中 创建 GIF 





抖动 量 可 以 帮助 创建 平 请 的 颜色 过 渡 。 它 检查 相 邻 两 个 不 同 颜色 的 像素 ， 
并 选择 一 个 位 于 二 者 之 间 的 新 颜色 来 获得 平滑 的 颜色 混合 。 例 如 ， 下 面 这 
个 图 像 中 最 多 有 40 种 颜色 ， 可 以 看 到 抖动 量 设置 为 0 (图 3-6) 与 抖动 量 设 
置 为 100 (图 3-7) 时 平 请 度 的 对 比 效 果 。 




















图 3-6: 拉动 量 设置 为 0 的 GIF: 4.8 KB 
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图 3-7: 拌 动量 设置 为 100 的 GIF: 9.7 KB 


GIF 图 片 的 体积 受 拌 动量 的 影响 。 在 图 3-6 和 图 3-7 中 ， 当 抖动 量 设置 
为 0 时 ， 输 出 的 GIF 为 4.8 KB。 当 抖动 量 设置 为 100 时 ， 输 出 的 GIF 为 
9.7 KB。 注 意 ， 虽 然 两 张 图 片 在 保存 为 网 页 格式 的 色 板 中 最 多 有 40 色 ， 
但 最 终 实际 上 可 以 获得 多 达 256 色 。 



































有 趣 的 是 ， 如 果 我 们 改变 这 张 GIF 图 片 中 渐变 的 方向 ， 设 置 抖动 量 为 100 
并 输出 ， 可 以 发 现 如 图 3-8 所 示 的 巨大 变化 。 


























图 3-8: 垂直 图 案 的 GIF: 21 KB 
为 什么 文件 体积 增加 了 一 倍 多 ? GIF 所 采用 的 压缩 算法 只 消除 水 平 元 余 。 





优化 图 片 | 31 





因此 ， 如 果 引 入 了 额外 的 垂直 方向 细 市 或 噪点 ， 就 会 造成 GIF 文件 体积 航 
增加 。 当 创建 GIF 时 ， 需 要 考虑 如 何 配合 优化 ， 在 保证 文件 体积 尽 可 能 小 
的 前 提 下 仍然 保持 美观 。 尽 量 减少 垂直 噪点 ， 因 为 它 对 GIF 文件 的 体积 
很 大 的 影响 。 


对 于 大 多 数 含有 少量 颜色 并 且 内 容 分 界 清晰 的 图 像 来 说 ，PNG-8 是 更 好 的 
选择 。PNG 使 用 的 压缩 算法 与 GIF 不 同 ， 同 GIF 一 样 ， 它 会 寻找 图 像 中 
的 水 平 重 复 模式 ， 但 同时 也 会 寻找 垂直 方向 上 的 模式 。 对 于 同一 张 图 片 ， 
PNG-8 的 版 本 很 可 能 比 GIF 格式 的 还 要 小 ， 因 此 为 了 实现 文件 体积 与 视觉 
效果 之 间 的 平衡 ， 确 保 测试 PNG-8 格式 的 图 片 表现 如 何 。 


最 后 ， 如 果 GIF 中 包含 有 简单 的 动画 ， 比 如 一 个 下 拉 菜 单 或 进度 指示 ， 可 
以 考虑 用 CSS3 动画 来 代替 。CSS3 动画 更 加 轻 量 ， 并 且 性 能 优 于 GIF， 因 
此 测试 一 下 是 否 能 用 它 代替 你 网 站 中 的 GIF 是 值得 的 。 




































































3.1.3 PNG 

PNG 是 一 个 无 损 图 像 格 式 ， 设 计 目 的 是 为 了 对 GIF 格式 进行 改进 。 
Photoshop 允许 导出 PNG-8 和 PNG-24 的 图 像 ， 每 种 格式 在 优化 性 能 时 各 有 
利 次 。 


当 图 片 需 要 透明 时 ，PNG 格式 是 最 佳 选择 。GIF 虽然 也 支持 透明 ， 但 是 文 
件 体积 比 PNG 大 得 多 。PNG 会 识别 水 平 模式 并 同 GIF 一 样 对 它们 进行 压 
缩 ， 但 它 同时 能 识别 垂直 模式 ， 这 意味 着 PNG 的 压缩 比 更 高 。 


当 图 像 中 的 颜色 数量 较 少 时 ，PNG-8 可 能 是 最 佳 的 文件 格式 选择 。PNG-8 
的 图 像 最 多 可 以 含有 256 种 颜色 ， 通 常 文 件 体积 也 更 小 。 


在 图 3-9 中 可 以 看 到 一 个 包含 247 色 的 图 像 。 在 这 个 例子 中 ， 色 板 中 所 有 
247 种 颜色 都 是 不 同 程度 的 灰色 。PNG-8 同 GIF 一 样 最 多 可 以 有 256 种 颜 
色 。 同 GIF 一 样 ， 我 们 可 以 选择 抖动 量 〈 在 3.1.2 节 阅 读 详 细 内 容 ) 并 对 总 
文件 体积 产生 影响 。 
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图 3-9: Photoshop 中 导出 PNG-8 的 视图 


在 图 3-9 中 同时 还 有 透明 度 的 选项 。 图 片 中 的 文字 有 阴影 ，PNG-8 导出 视 
图 有 一 个 杂 边 的 选项 。 杂 边 选 项 告诉 Photoshop 如 何 处 理 图 像 的 背景 色 : 颜 
色 应 该 同 导 出 后 的 PNG 中 元 素 的 背景 色相 匹配 。Photoshop 会 选择 哪些 像 
素 需 要 透明 ， 以 及 原始 的 半 透 明 阴 影 如 何 同 我 们 所 选择 的 杂 边 进行 混合 ， 
以 对 文本 周围 的 像素 进行 着 色 。 


在 图 3-10 中 我 们 将 PNG 设置 为 最 多 包含 256 色 ， 但 同样 我 们 并 不 需要 全 
部 的 256 种 颜色 。 在 这 个 例子 中 ，PNG 导出 后 只 包含 4 种 颜色 : 白 、 蓝 、 
绿 和 红 。 | 但 事实 上 并 不 需要 ， 因 为 导出 后 的 
图 像 本 身 具有 白色 的 背景 。Photoshop 可 以 帮助 你 优化 创建 的 图 像 的 文件 体 
积 ， 但 依然 需 要 使 用 额外 的 压缩 工具 来 对 图 像 进 行 处 理 (在 3.1.4 节 中 阅读 
更 多 内 容 )。 
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图 3-10: PNG-8 导出 视图 ， 只 有 少量 颜色 


另外 ，PNG-24 文件 则 在 颜色 数量 上 没有 同样 的 限制 。 当 选用 PNG 为 图 片 





格式 时 ， 体 积 通常 是 JPEG 的 5 至 10 倍 ， 因 为 它 是 无 损 的 。 同 其 他 图 像 文 
件 格式 一 样 ， 减 少 噪点 和 颜色 数量 可 以 从 整体 上 减少 PNG 文件 的 体积 。 让 
我 们 对 比 图 3-11 中 的 两 个 图 像 : 其 中 一 个 包含 5 种 不 同 颜色 的 色 条 ， 另 外 


一 个 则 包含 10 种 。 




















色 条 颜色 数 : 5 色 条 颜色 数 : 10 
文件 体积 : 2.96KB 文件 体积 : 3.14 KB 








图 3-11; 对 比 包 含有 5 种 和 10 种 不 同 颜色 的 色 条 








这 些 图 片 是 通过 Photoshop 的 “保存 为 网 页 格式 ”工具 导出 的 。 增 加 图 像 中 
的 颜色 数量 导致 文件 体积 增加 了 6%。 如 果 能 找到 减少 图 像 中 颜色 数量 的 方 
法 ， 就 可 以 提升 性 能 ， 比 如 对 网 站 所 使 用 的 颜色 进行 标准 化 〈 在 4.4 节 中 会 
介绍 ) 。 


在 图 3-12 的 示例 中 ， 我 们 将 同样 的 文件 以 默认 设置 导出 为 包含 透明 度 的 
PNG-8 格式 (图 3-9)， 可 以 注意 到 PNG-24 文件 处 理 透 明度 的 方式 非常 
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图 3-12: 透明 的 PNG-24 导出 视图 


在 PNG-8 中 ，Photoshop 采用 杂 边 颜色 来 混合 投影 . 并 不 存在 半 透 明 的 像 
素 ， 在 投影 周围 只 有 全 透明 的 像素 。 而 在 PNG-24 中 可 以 看 到 半 透 明 。 这 
也 自然 导致 文件 体积 的 增加 : 图 像 细 节 的 丰富 会 让 文件 体积 显著 增长 。 如 
果 文 件 中 有 大 量 不 同 的 颜色 并 且 不 需要 透明 度 ， 可 以 选择 JPEG 作为 替代 
方案 。 


Fireworks (和 Photoshop 类 似 的 图 像 处 理工 具 ) 和 pngquant (PNG 图 像 有 
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损 压 缩 工 具 ) 等 工具 也 可 以 生成 半 透 明 的 PNG-8。 但 是 在 Photoshop 中 ， 如 
果 你 需要 导出 半 透 明 的 图 像 ， 需 要 选择 PNG-24。 同 样 ， 通 过 额外 的 压缩 工 
具 对 Photoshop 导出 的 图 像 进行 处 理 (在 3.1.4 节 中 阅读 更 多 内 容 )。 

















需要 注意 的 是 ，IE6 等 老式 浏览 器 对 PNG 仅 提 供 了 有 限 的 支持 。 如 果 你 的 
网 站 流 有 大 量 来 自 老 式 浏览 器 的 流量 ， 就 需要 对 它们 进行 优化 ， 对 所 有 导 
出 的 PNG 图 像 进行 测试 ， 确 保 它 们 可 以 正常 泻 染 。 


新 的 图 像 格式 怎么 样 ? 


比较 新 的 图 像 格 式 ， 比 如 WebP (https://developers.google.com/speed/webp/)、 
JPEG XR (http:Wen.wikipedia.org/wiki/JPEG_XR)、JPEG 2000 (http://en. 
wikipedia.org/wikiJPEG_2000) ， 都 对 性 能 进行 了 更 多 优化 。 随 着 图 像 创 作 软 
件 和 浏览 器 对 它们 的 支持 越 来 越 好 ， 我 们 也 有 更 多 的 机 会 使 用 这 些 新 的 图 片 
格式 ， 对 网 站 的 图 像 进行 更 多 优化 ， 从 而 提升 页 面 速度 和 感知 性 能 。 


3.1.4 额外 的 压缩 

在 导出 图 像 之 前 ， 确 保 图 像 的 宽度 和 高 度 在 你 需要 的 最 大 范围 以 内 。 如 果 
图 片 的 实际 大 小 超出 了 必要 范围 ， 并 在 显示 时 进行 缩小 ， 会 对 页 面 加 载 速 
度 产 生 负 面 影响 ， 因 为 你 强迫 用 户 下 载 了 非 必要 的 内 容 。 在 5.1 市 中 阅读 更 
多 关于 如 何 提供 大 小 合适 的 图 像 的 内 容 。 





























导出 图 像 之 后 ， 可 以 使 用 诸如 InageOptim (http://www.imageoptim.com/) 
或 Smush.it (http:/www.smushit.com/) 这 样 的 工具 ， 找 出 适合 不 同文 件 格 
式 的 合理 压缩 策略 。 





ImageOptim 是 可 在 Mac 平 台 上 下 载 的 一 款 软件 。 将 图 片 拖 搜 进去 ， 可 
以 看 到 它 会 为 该 图 片 找 到 最 好 的 无 损 压 缩 方法 ， 并 移 除 不 必要 的 色彩 描 
述 和 注解 (图 3-13)。 这 个 软件 目前 包含 了 PNGOUT、Zopfli、Pngcrush、 
AdvPNG、 扩 展 的 OptiPNG、JpegOptim、jpegrescan、jpegtran 及 Gifsicle 等 
压缩 工具 。ImageOptim 可 以 对 JPEG、PNG 甚至 GIF 动画 进行 优化 ， 为 图 
像 选 取 最 合适 的 压缩 方法 。 由 于 ImageOptim 采用 无 损 压 缩 ， 因 此 最 终结 果 
是 一 个 更 小 且 没 有 质量 损失 的 文件 ， 正 是 我 们 进行 性 能 优化 所 需要 的 。 









































@ee ImageOptim 
File Size Savings 
图 hexagon.png 1,445 72.1% 
+ | Drag and drop image files onto the area above 








图 3-13: ImageOptim 是 一 个 采用 无 损 压缩 算法 来 压缩 图 像 文 件 的 软件 








Smush.it 同样 是 一 个 无 损 压缩 工具 ， 它 是 一 个 Web 软件 而 非 桌面 软件 。 同 











ImageOptim 一 样 ， 它 可 以 处 理 JPEG、PNG 和 GIF。Smush.it 中 








包含 了 


ImageMagick、pngcrush、jpegtran 和 Gifsicle 等 压缩 工具 。 当 在 Smush.it 中 
上 传 图 像 或 输入 图 像 的 URL 后 ， 它 会 选择 最 合适 的 压缩 工具 来 进行 处 理 ， 























然后 显示 一 个 含有 压缩 后 图 像 的 下 载 链 接 的 表格 (图 3-14)。 





Smushed 54.50 or 2.75 KB from the size of your image(s). 
How did we do it? See the table below for more details. 





Smushed Images 





< Result Source size Result size Savings % Savings 








b5922896%2Fhexagon.png  b5922896%2Fsmush%2Fhexagon.png 5.05 KB 2.30 KB 2.75 KB 54. 





50% 














图 3-14: Smush.it 是 一 个 采用 无 损 压 缩 方法 来 节省 图 像 文件 体积 的 在 线 工具 


这 些 工 具 可 以 在 不 损失 质量 的 前 提 下 ， 大 大 减 小 图 像 的 文件 体积 。 
衡 视 觉 效 果 和 性 能 ， 在 将 图 像 上 传 到 网 络 上 之 前 用 这 些 工具 来 处 到 
对 比 ， 将 有 很 大 好 处 。 





为 了 权 
并 进行 


如 果 可 能 ， 可 以 将 网 站 图 像 的 优化 工作 自动 化 。 你 可 能 有 数 个 内 容 贡献 
者 ， 而 他 们 的 工作 流程 不 应 该 因为 需要 为 单独 的 图 片 进行 优化 而 被 打 断 。 将 




















ImageOptim-CLI (https://github.com/JamieMason/ImageOptim-CLI) 或 像 


EWWW 


Image Optimizer (https://wordpress.org/plugins/ewww-image-optimizer/) 这 样 的 
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WordPress 插件 集成 到 网 站 的 构建 流程 中 ， 来 确保 所 有 新 创建 并 上 传 的 图 像 都 
进行 了 必要 的 额外 压缩 处 理 。 


3.2 ”和 蔡 换 图 片 请 求 


除了 减 小 图 片 文件 的 体积 以 外 ， 通 过 减少 图 片 请 求 的 数量 来 优化 页 面 加 载 
时 间 也 是 很 重要 的 (在 第 2 章 中 有 关于 页 面 加 载 时 间 的 基础 内 容 )。 有 意识 
地 优化 网 站 请 求 数量 和 加 载 图 片 的 方式 ， 可 以 减少 页 面 加 载 时 间 ， 让 用 户 
尽快 看 见 并 与 网 站 交互 。 以 下 两 种 方式 可 以 减少 图 片 请 求 : 


。 将 图 片 合并 到 精灵 图 中 
。 用 CSS3、data URI 和 SVG 替换 图 片 文件 




































































3.2.1 精灵 图 

关于 网 络 性 能 有 一 句 名 言 :“ 最 快 的 请 求 ， 是 根本 没有 发 出 的 请 求 。 将 图 
片 合并 成 精灵 图 是 减少 图 片 请 求 数量 的 途径 之 一 。 由 于 图 片 合 并 成 了 一 个 
大 的 文件 ， 并 且 额 外 增加 了 用 来 定位 精灵 图 中 素材 的 CSS 规则 ， 页 面体 积 
可 能 会 有 些许 增加 ， 但 是 页 面 加 载 速度 会 显 车 提 升 。 





















































网 站 设计 中 那些 较 小 、 重 复 的 图 片 是 合并 入 精灵 图 的 理想 选择 。 这 包括 图 
标 、 网 站 标志 和 网 站 中 使 用 的 其 他 CSS 背景 图 片 。 图 3-15 是 一 个 精灵 图 
示例 。 




















Designing for 六 
Performance sa， 


图 3-15: 这 个 sprite.png 中 包含 了 网 站 标志 、 桃 心 、 星 星 以 及 网 站 中 可 能 用 
到 的 其 他 图 标 


可 以 看 到 这 张 精 灵 图 中 包含 了 主 标志 以 及 星星 和 其 他 各 种 图 标的 不 同 版 本 。 
下 面 我 们 用 CSS 和 HTML 来 实现 这 张 精 灵 图 。 图 3-16 展示 了 最 终 输 出 的 


视觉 效 









































让 
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二 We have a favorite! 


次 We have a winner!! 











图 3-16: 这 个 截图 展示 了 我 们 希望 在 页 面 中 如 何 使 用 精灵 图 


在 不 使 用 精灵 图 的 情况 下 ， 我 们 需要 给 每 个 元 素 分 别 应 用 图 片 。 从 下 面 的 
标记 开始 : 








<h1>Designing for Performance</h1> 
<p class="fave">We have a favorite!</p> 
<p class="fave winner">We have a winner!!</p> 





在 这 段 HTML 中， 我们 将 网 站 标志 应 用 到 hd 元 素 上 ， 通 过 fave 类 将 星星 
应 用 到 第 一 个 段落 标记 上 ， 另 外 一 个 星星 应 用 到 具有 winner 类 名 的 第 二 个 
段落 标记 上 。 下 面 是 用 于 应 用 图 片 的 初始 CSS: 

















hi, .fave:before { 
background: transparent no-repeat; @ 


} 


hi { 
background-image: url(h1.png); 
text-indent: -9999px; @ 
height: 75px; 
width: 210px; 

站 


.fave { 
line-height: 30px; 
font-size: 18px; 


} 


.fave:before { © 
background-image: url(star.png); 
display: block; 
width: 18px; 
height: 17px; 


59 


content: 
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© 


float: left; 
margin: 5px 3px 0 0; 
} 


.winner:before { 
background-image: url(star-red.png); 


} 


我 们 为 这 些 元 素 指定 了 透明 的 background-color， 并 告诉 它 在 元 素 的 宽 
高 范围 内 不 要 重复 显示 background-image。 
用 text-indent 对 hl 元 素 在 页 面 中 的 可 见 区 域 中 的 文字 进行 缩 进 ， 以 便 
创造 空间 给 background-image 显示 。 可 以 采用 很 多 方法 来 移动 页 面 中 基 
个 区 域 的 文字 ， 同 时 不 影响 其 对 用 户 的 可 见 性 。 可 以 尝试 用 下 面 的 方法 
来 隐藏 可 见 的 文字 : 

element { 

text-indent: 100%; 

white-space: nowrap; 


overflow: hidden; 


} 



























































text-indent: 100% 在 iPad 1 上 对 这 个 元 素 应 用 很 多 动画 时 ， 可 能 会 显著 
提升 性 能 。 





为 了 让 星星 显示 在 段落 文本 的 左 侧 ， 我 将 图 片 应 用 在 段落 的 :before 伪 
元 素 上 。:before 选择 器 会 创建 一 个 新 的 行内 元 素 ， 因 此 可 以 在 被 选择 
的 元 素 之 前 插入 内 容 。:after 也 是 一 个 可 以 使 用 的 伪 元 素 。 这 些 伪 元 素 
在 现代 浏览 器 中 都 有 良好 的 支持 ，IE8 中 部 分 支持 ， 而 更 早 版 本 的 正则 
不 支持 。 











现在 让 我 们 用 精灵 图 来 代替 独立 的 图 片 。 我 们 将 使 用 前 面 例子 中 的 精灵 图 

















( 医 








3-15) 并 将 它 应 用 到 hl 和 .fave:before 元 素 上 ; 





图 3-17 展示 了 将 精灵 图 应 用 到 :before 元 素 上 之 后 的 效果 。 


h1，.fave:before { 
background: url(sprite.png) transparent no-repeat; 


} 
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T We have a favorite! 


T We have a winner!! 











图 3-17: 这 张 截图 展示 了 :before 元 素 应 用 了 精灵 图 后 的 段落 效果 ， 但 是 位 
置 并 不 正确 


接 下 来 需要 给 精灵 图 指定 新 的 background-position， 这 样 星 星 才 能 
常 显示 。hdi 的 精灵 图 的 background-position 默认 值 为 0 0 或 top Left。 
background-position 可 以 选择 多 种 形式 的 值 对 ， 分 别 对 应 x 轴 和 ?了 轴 : 





®。 50% 25% 
®。 50px 200px 
。 Left top 


在 我 们 的 例子 中 ， 我 们 知道 星星 在 精灵 图 中 的 位 置 ， 因 此 可 以 使 用 像素 值 
来 移动 background-image， 直 到 星星 被 展示 出 来 。 对 于 第 一 个 星星 ， 需 要 将 
精灵 图 向 左 移动 216px 并 向 上 移动 15px， 以 在 :before 伪 元 素 中 显示 正确 的 
图 片 。 将 以 下 CSS 添加 到 .fave:before 的 样式 中 : 











.fave:before { 


background-position: -216px -15px; 
} 


第 二 个 星星 会 自动 继承 应 用 在 第 一 个 星星 上 的 样式 ， 因 为 它们 具有 相同 的 
类 名 fave。 我 们 只 需要 调整 background-position 以 显示 红色 的 星星 图 标 : 

















.winner:before { 
background-position: -234px -15px; 
} 


下 面 是 我 们 用 精灵 图 取代 独立 的 图 像 的 最 终 CSS: 
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h1，.fave:before { 


background: url(sprite.png) transparent no-repeat; 


} 


hi { 
text-indent: -9999px; 
height: 75px; 
width: 210px; 

} 


.fave { 
line-height: 30px; 
font-size: 18px; 


} 


.fave:before { 
display: block; 
width: 18px; 
height: 17px; 
content: ''; 
float: left; 
margin: 5px 3px 0 0; 


background-position: -216px 


} 


.winner:before { 


background-position: -234px 


} 


-15px; 


-15px; 


由 于 图 片 请 求 数量 明显 减少 ， 精 灵图 可 以 节省 大 量 的 页 面 加 载 时 间 。 由 于 
精灵 图 文件 的 大 小 和 额外 增加 的 CSS 代码 ， 页 面体 积 可 能 会 增加 。 尽 管 如 
此 ,使 用 精灵 图 仍然 比 使 用 独立 的 图 片 文件 具有 更 快 的 加 载 速 度 ， 因 为 浏 
览 器 只 要 一 个 HTTP 请 求 就 可 以 加 载 所 需 图 片 。 

















我 在 网 站 上 创建 了 两 个 测试 页 面 : 





























其 中 一 个 使 用 了 精灵 








图 ， 另 一 个 没有 使 


用 。 通 过 WebPagetest 分 别 获取 两 个 页 面 的 感知 性 能 (图 3-18)。 注 意 , 在 
类 似 这 样 的 试验 中 ， 总 加 载 时 间 和 整体 速度 在 多 次 测试 中 会 有 差异 ， 但 这 
可 以 让 我 们 粗略 地 估计 精灵 图 对 性 能 的 潜在 影响 。 
















































































EA 
国 DNS 查询 加 连接 初始 化 1 开始 党 染 | 获 民 和 “加 加载 DOM 内 容 加 加 载 1 文档 加 载 完成 
三 

应 用 精灵 图 之 前 
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图 3-18: 应 用 精灵 图 前 后 的 连接 情况 对 比 








图 3-18 展示 了 应 用 精灵 图 前 后 的 连接 情况 。 在 使 用 精灵 图 之 前 ，Chrome 建 
立 了 三 条 连接 用 以 获取 页 面 内 容 。 第 一 个 连接 中 ， 在 DNS 查询 及 连接 初始 








化 后 ， 训 览 器 获取 了 页 面 的 HIML 及 第 一 张 图 
需要 初始 化 ， 然 后 加 载 更 多 的 图 片 。 下 载 的 最 后 一 张 
二 条 连接 中 在 文档 快要 加 载 完 成 时 开始 的 ) 是 网 站 医 




















图 片 〈 注 意 它 是 





标 。 


片 。 在 第 三 个 连接 中 ， 依 然 





在 第 


使 用 精灵 图 后 ，Chrome 建立 了 两 条 连接 用 以 获取 页 面 内 容 。 第 一 个 连接 


I DR 


中 ,在 DNS 查询 及 连接 初始 化 后 ， 浏 
同样 ， 在 文档 加 载 完 成 时 浏览 器 获取 了 网 站 医 

















览 器 获取 了 页 面 的 HTML 及 精灵 
标 。 如 你 所 见 ， 在 使 用 精灵 





图 。 


图 后 文档 加 载 完 成 得 更 快 。 另 一 种 将 使 用 精灵 图 的 版 本 的 感知 性 能 可 视 化 
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3-19)。 








的 方式 是 使 用 Speed Index 指标 ( 
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加 载 进度 (%) 





100 





图 应 用 精灵 图 之 前 
图 应 用 精灵 区 
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图 3-19:WebPagetest 的 Speed Index 指标 有 助 于 描述 页 面 加 载 完 成 的 情况 。 
WebPagetest 通过 指出 在 加 载 页 面 过 程 中 的 不 同时 间 点 页 面 的 完成 
情况 来 计算 Speed Index， 并 随 着 时 间 的 推移 将 进度 显示 出 来 


2.3.1 布 中 曾 提 到 ，Speed Index 是 页 面 上 可 见 部 分 显示 所 需 的 平均 时 间 。 当 
你 想 要 测量 页 面 的 感知 性 能 时 ， 这 是 一 个 非常 好 的 指标 ， 因 为 它 可 以 告诉 
你 用 户 对 页 面 首 屏 内 容 的 加 载 速度 的 感知 情况 。 在 上 面 的 例子 中 ， 视 觉 进 
度 (Speed Index 从 中 计算 而 来 ) 的 图 展示 了 使 用 精灵 图 后 页 面 加 载 速度 的 
提升 情况 。 





















































HTTP/2 怎么 样 ? 


HTTP/2 是 一 个 目前 正在 制定 的 Web 协议 的 重大 版 本 。 其 主旨 是 提升 性 能 ， 
HTTP/2 的 主要 目标 之 一 是 允许 在 浏览 器 到 服务 器 之 间 使 用 单一 连接 ， 帮 助 
浏览 器 优化 资源 请 求 。 使 用 HTTP/2， 托 管 网 站 文件 的 Web 服务 器 可 以 瞳 
示 其 至 将 内 容 主 动 推送 给 浏览 器 ， 而 不 是 等 待 浏览 器 请 求 单独 的 页 面 资 源 。 
这 意味 着 精灵 图 技术 在 今后 可 能 会 被 淘 状 | 








使 用 精灵 图 也 有 一 些 潜 在 的 性 能 缺陷 。 如 果 你 需要 更 换 精灵 图 中 的 某 个 图 
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片 ， 将 不 得 不 破坏 整个 文件 的 缓存 。 此 外 ， 使 用 精灵 图 也 会 强制 用 户 下 载 
可 能 不 必要 的 内 容 ， 即 使 精灵 图 中 的 某 些 图 标 在 用 户 访问 的 过 程 中 从 未 被 
使 用 过 ， 用 户 也 不 得 不 下 载 并 解码 一 个 较 大 的 文件 。 在 创建 精灵 图 并 测量 
其 对 性 能 的 影响 时 ， 需 要 考虑 这 些 缺 点 。 














我 的 团队 进行 了 一 项 实验 ， 我 们 有 一 个 页 面 ， 其 中 有 10 个 位 置 用 来 展示 26 
张 带 有 旋转 动画 的 缩 略图 。 我 们 将 所 有 26 张 图 片 转换 成 一 张 精 灵 图 ， 实 验 
结果 如 下 : 


。 新 添加 的 CSS、JavaScript 和 图 片 导致 页 面体 积 增 加 了 60 KB 
。 请 求 数 量 减少 了 21% 
。 页 面 整体 加 载 时 间 减 少 了 35% 
































这 些 结果 表明 ， 网 页 加 载 时 间 优 化 的 实验 是 很 有 价值 的 。 我 们 之 前 并 不 确 
定 这 一 技术 是 否 会 提升 整个 页 面 的 加 载 速 度 ， 但 我 们 确信 进行 实验 是 值得 
的 ， 因 为 可 以 从 中 总 结 经 验 。 在 第 6 章 中 阅读 更 多 关于 性 能 的 测量 和 迭代 
的 内 容 。 





3.2.2 CSS3 


使 用 CSS 替换 图 像 是 另 一 种 减少 图 像 请 求 的 方法 。 通 过 CSS 可 以 创建 几何 
形状 、 渐 变 和 动画 。 以 CSS3 渐变 为 例 : 


。 可 以 处 理 透明 度 

。 可 以 同 背 景谷 加 
。 减少 一 个 图 片 请 求 
。 极 易 修改 


CSS 是 替换 图 像 的 绝 佳 选择 。 无 需 担 心 CSS3 语法 中 厂商 前 级 导致 页 面体 积 
增加 。 在 网 站 中 使 用 gzip 可 以 对 代码 进行 有 效 的 压缩 (阅读 4.5.2 节 获 取 更 
多 内 容 )。 即 使 需要 加 载 更 多 的 CSS 代码 ， 相 比 图 片 请 求 ， 这 也 是 性 能 更 好 
的 选择 。 


简单 重复 的 渐变 是 使 用 CSS 替换 图 片 的 一 个 好 例子 。 如 果 可 以 使 用 代替 
片 请 求 的 既 简 单 又 可 复 用 的 CSS3 渐变 ， 为 什么 还 要 使 用 图 片 呢 ? 























加 
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例如 ， 你 可 以 创建 一 个 由 白 到 透明 的 渐变 ， 在 任何 你 想 显 示 的 元 素 上 使 用 
这 个 渐变 。 让 我 们 试 试 这 三 个 按钮 : 
<a href="#">Click Me</a> 


<a href="#" class="buy">Buy This</a> 
<a href="#" class="info">More Info</a> 


在 我 们 的 CSS 中 ， 我 们 已 将 字体 和 间距 样式 应 用 在 这 些 按 钮 上 。 添 加 基本 
的 斜面 渐变 : 














Em 
background-image: 
linear-gradient(to bottom, #FFF, transparent); 
background-color: #DDD; 
border: 1px #DDD solid; 


} 


说 明 
在 本 例 中 ， 我 只 介绍 了 W3C 渐 变 语 法 。 在 其 他 浏览 器 中 ， 比 如 Firefox 
和 Internet Explorer， 你 需要 添加 语法 。 


基于 这 段 CSS， 我 们 所 有 的 超 链 接 都 会 有 一 个 灰色 的 背景 ， 在 这 个 背景 之 
上 还 有 通过 CSS3 创建 的 渐变 ， 被 设置 为 背景 图 片 。 每 个 超 链接 还 有 一 个 
lpx 的 实 线 灰色 边框 。 通 过 设置 背景 色 和 边框 色 ， 可 以 将 Buy This 按钮 设 
置 为 绿色 ，More Info 按钮 为 蓝 色 : 








.buy { 
background-color: #C2E1A9; 
border-color: #D8ESCE; 


} 


.info { 
background-color: #AFCCD3; 
border -color: #DAE9EC; 

} 


最 终 效果 如 图 3-20 所 示 ， 每 个 按钮 有 各 自 的 背景 色 ， 背 景色 上 面 覆盖 了 由 
白 到 透明 的 渐变 。 









































Click Me BuyThis More Info 











图 3-20: 使 用 了 CSS3 渐变 表 景 的 按钮 


使 用 像 这 样 的 渐变 可 以 减少 图 片 请 求 ， 这 可 以 提升 页 面 加 载 速度 。 鉴 于 
你 可 以 控制 渐变 颜色 开始 和 结束 的 位 置 ， 使 用 CSS3 渐变 可 以 创造 出 非常 
惊艳 的 效果 。 下 面 的 例子 展示 了 一 个 用 CSS3 渐变 创建 的 六 边 形 ， 可 以 在 
WebKit 浏览 器 中 显示 。 我 们 只 需要 一 个 元 素 ， 在 这 个 例子 中 我 选择 了 div: 















































<div class="hexagon"></div> 


下 面 的 CSS 可 以 将 这 个 div 元 素 在 WebKit 浏览 器 中 变 为 一 个 彩色 的 六 
边 形 : 


.hexagon { 
width: 333px; height: 388px; 
background-image: 
-webkit-linear-gradient(120deg, #fff 83px, transparent 0， 
transparent 419px, #fff 0), 
-webkit-linear-gradient(-120deg, #fff 83px, transparent 0， 
transparent 419px, #fff 0), 
-webkit-linear-gradient(160deg, transparent 345px， 
#1e934f 0) ， 
-webkit-linear-gradient(140deg, transparent 376px， 
#1e934f 0) ， 
-webkit-linear-gradient(120deg, transparent 254px， 
#085b25 0)， 
-webkit-linear-gradient(150deg, #053b17 183px， 
transparent 0)， 
-webkit-linear-gradient(80deg, transparent 96px， 
#085b25 0); 
background-color: #053b17; 
} 


3-21 展示 了 Chrome 中 如 何 显示 这 个 六 边 形 。 
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图 3-21: 只 用 CSS3 渐变 制作 的 六 边 形 ， 由 Geometry Daily #286 (http:// 
geometrydaily.tumblr.com/post/33428364684/286-icosahedron- 
shaded-a-new-minimal) 提供 


可 以 借助 ColorZilla’s Gradient Editor (http://www.colorzilla.com/gradient- 
editor/) 等 工具 创建 CSS3 渐变 。 可 以 选择 使 用 不 同 的 颜色 、 渐 变 方向 以 及 
支持 何 种 浏览 器 。 让 我 们 定义 一 个 自 上 而 下 、 从 浅 绿 色 过 渡 到 深 绿色 的 渐 
变 ， 并 且 支 持 跨 浏览 器 。 这 个 例子 中 ， 我 们 故意 在 两 种 绿色 中 间 设 置 了 一 
个 明显 的 分 界线 ， 而 不 是 平 请 的 渐变 。 





首先 给 元 素 设置 会 应 用 在 background 和 background-cotLor 上 的 备用 颜色 , 


/* Old browsers should get a faLLback color */ 
background: #7AC142; 


我 强烈 建议 给 每 一 个 应 用 渐变 的 元 素 都 设置 background-color， 这 样 在 不 支 
持 CSS3 的 浏览 器 中 文字 和 背景 之 间 依 然 有 对 比 ， 而 不 会 影响 阅读 。 一 定 要 
对 不 同 的 浏览 器 进行 渐变 测试 ， 以 确保 它们 能 够 如 期 显示 ， 并 且 文 字 可 读 。 


为 了 支持 更 多 的 浏览 器 ， 需 要 将 下 面 的 CSS 应 用 在 元 素 的 back-ground 或 
background-image 属性 上 : 


/* FF3.6+ */ 
-moz-linear-gradient(top, #e4f3d9 50%, #7ac142 0); 


/* Chrome, Safari4+ */ 

-webkit-gradient(linear, left top, left bottom， 
color-stop(0%,#e4f3d9), color-stop(50%,#e4f3d9), 
color-stop(51%,#7ac142)); 
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/* Chrome10+，Safarti5.1+ */ 
-webkit-linear-gradient(top, #e4f3d9 50%, #7ac142 0); 


/* Opera 11.10+ */ 
-0-linear-gradient(top, #e4f3d9 50%, #7ac142 0); 


/* IE10+ */ 
-ms-linear-gradient(top, #e4f3d9 50%, #7ac142 0); 


/* W3C */ 

linear-gradient(to bottom, #e4f3d9 50%, #7ac142 0); 
在 上 面 的 代码 中 ， 元 素 从 顶部 到 50% 高 度 的 地 方 都 会 保持 浅 绿色 。 为 了 在 
We 建 分 界线 ， 大 多 数 浏 览 器 都 可 以 通过 将 第 二 个 颜色 点 设置 
为 06 来 实现 。 这 会 告诉 浏览 器 ， 在 50% 高 度 的 浅 绿色 之 后 ， 立 即 开 始 显示 
新 的 颜色 。 但 0 Chrome 和 Safari 浏览 器 中 ， 我 们 需要 设置 多 个 颜 
色 点 及 百分比 来 确保 它们 正常 工作 ! 
































最 终 效果 如 图 3-22 所 示 。 








图 3-22: 具有 明显 分 界线 的 CSS3 渐变 











background 和 background-image 


将 渐变 应 用 到 background 和 background-image 上 有 什么 不 同 ? 浏览 器 很 聪 
明 ， 如 果 你 在 background 上 设置 渐变 ， 它 会 将 其 应 用 到 background-image 
上 。 渐 变 会 正常 工作 ， 并 且 不 会 被 元 素 上 的 background-color 所 徐 盖 
background-image 会 被 盖 background-color 上 声明。 尽管 如 此 ， 关 果 丰 辣 证 面 
的 CSS 代码 中 通过 给 元 素 声明 background 来 定义 background-image 渐变 ， 
会 将 之 前 的 定义 覆盖 。 


如 果 想 要 在 旧版 Internet eid 中 支持 CSS3 渐变 ， 需 要 给 元 素 设 置 
filter 属性 。 但 是 我 们 通过 filter 属性 只 能 设置 平滑 渐变 ， 而 无 法 实现 两 





优化 图 片 | 49 





种 绿色 中 间 的 明显 分 界线 : 


/* IE6-9 */ 

filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#e4f3d9' ,endCoLorstr= '#7ac142 ' ， 
GradientType=0 ); 


你 需要 通过 分 析 网 站 流量 中 浏览 器 的 版 本 分 布 ， 来 决定 需要 添加 哪些 厂商 


前 级 。 


上 面 的 CSS 中 也 包含 了 W3C 标准 的 渐变 声明 : Linear-gradient。 和 希望 在 
不 久 的 将 来 ， 随 着 更 多 浏览 器 厂商 在 CSS3 新 变 语法 上 达成 一 致 ， 可 以 清理 
掉 CSS 代码 中 多 余 的 厂商 前 级 。 


除了 用 CSS3 制作 渐变 ， 在 其 他 地 方 CSS 还 可 以 作为 一 个 强大 的 图 片 奉 代 
品 ， 取 代 加 载 指示 、 提 示 框 以 及 其 他 简单 的 图 像 。 有 很 多 使 用 纯 CSS 实现 
的 加 载 提 示 (http://dabblet.com/gist/7615212)、 用 CSS 定义 的 各 种 几何 形 
状 (https://css-tricks.com/examples/ShapesOfCSS/) 以 及 重复 花纹 (http://lea. 
verou.me/css3patterns/) 的 例子 。 














与 此 同时 ， 由 于 大 量 使 用 CSS3 可 能 会 有 代价 ， 需 要 注意 CSS 对 页 面 重 绘 
次 数 的 影响 。 重 绘 是 一 个 性 能 开销 非常 大 的 操作 ， 会 让 页 面 看 起 来 很 缓慢 。 
如 果 你 发 现 你 的 用 户 界面 变 得 很 缓慢 ， 尤 其 是 在 滚动 时 ， 这 可 能 是 CSS3 或 
JavaScript 重 绘 问题 。 使 用 JankFree.org (http://jank-free.org/) 可 以 分 析 页 面 
重 绘 问题 的 缘由 所 在 。 在 2.3 节 中 阅读 更 多 内 容 。 





3.2.3 data URI 和 Base64 编 码 图 像 

使 用 data URI 替换 较 小 且 简 单 的 图 像 也 是 一 个 减少 网 页 请 求 数量 的 方法 。 
为 了 实现 这 种 方法 ， 通 过 一 种 叫 作 Base64 编码 的 方法 将 图 像 转 换 为 纯 文 
本 ， 将 其 变 成 一 个 URI。 例 如 ， 假 设 我 们 有 一 张 PNG-8 格式 的 小 三 角形 图 
像 (图 3-23)， 计划 在 网 站 中 很 多 地 方 复 用 。 

















\ 











图 3-23: PNG-8 格式 的 小 三 角形 
使 用 在 线 的 Base64 编码 器 可 以 将 这 个 图 像 转化 为 等 价 的 文本 形式 (一 个 
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data URI) 。 我 们 将 图 像 上 传 到 编码 器 中 ， 编 码 器 返回 一 个 可 以 在 CSS 中 
使 用 的 data URI。 用 CSS 将 这 个 三 角形 的 Base64 编码 应 用 到 某 个 元 素 的 
background-image 中 看 起 来 是 这 样 的 : 
background-image: url(data:image/png;base64,iVBORwOKGgoAAAANSUh 
EUgAAAAoAAAAQCAAAAAAKFLGcAAAAVUTLEQVRA4AWM4 /B8GGOyfw5m6UQimx3 


Y4c6PKTxjzUn4FnPmB7QaM+X+CDZz5P2E+nHLS6C2M+b86Ac78b3MYzLyq8 
hpG/J/fAmSegQC22wzhxLlBQAQBbjnsWelX9QwAAAABJRUSErkJggg==); 


使 用 Base64 来 编码 图 片 ， 并 将 图 片 编码 能 入 页 面 中 ， 可 以 节省 一 个 HITP 
请 求 ， 进 而 提升 加 载 性 能 。 图 像 可 以 立即 被 处 理 并 显示 ， 无 需 等 待 图 片 的 
HTTP 请 求 。 















































但 与 此 同时 ， 使 用 行内 图 像 将 无 法 对 文件 进行 缓存 ， 并 使 CSS 文件 体积 增 
大 (有 时 并 不 明显 ， 取 决 于 data URI 的 长 度 )。 在 将 网 站 中 的 图 像 永久 转换 
成 data URI 之 前 ， 对 性 能 的 变化 进行 测试 ， 以 确保 这 种 转换 确实 能 带 来 性 
能 提升 。 























3.2.4 SVG 


可 缩放 向 量 图 形 (Scalable Vector Graphic，SVG) 是 用 来 替换 某 些 图 标 或 图 
片 的 绝 佳 选择 。 如 果 图 片 是 单 色 或 渐变 的 ， 透 明 的 ， 或 只 有 非常 少 的 细节 ， 
可 以 考虑 将 它 输出 成 SVG。SVG 使 用 XML 语法 ， 通 过 路 径 、 形 状 、 字 体 
和 颜色 等 属性 来 描述 图 片 。 






































使 用 SVG 图 像 最 大 的 好 处 是 ， 无 论 设备 是 否 支 持 视网膜 屏幕 ， 都 可 以 很 好 
地 显示 它 。 通 过 使 用 SVG 可 以 非常 好 的 为 高 分 辨 率 显 示 屏 服务 ， 而 无 需 重 
复 创建 高 分 辩 率 版 本 的 图 片 。 与 点 阵 图 像 不 同 ， 由 于 SVG 是 可 以 优雅 地 缩 
放 的 向 量 图 像 ， 因 此 可 以 在 合适 的 尺寸 和 清晰 度 下 显示 。 同 时 ， 用 行内 的 
SVG 来 替代 图 片 文 件 ， 还 可 以 节省 一 次 从 服务 器 获取 文件 的 HTTP 请 求 。 






































IE8 及 以 下 的 浏览 器 ， 以 及 运行 Android 2.x 及 以 下 的 设备 都 不 支持 SVG。 
但 是 通过 可 靠 的 功能 检测 ， 可 以 借助 工具 将 SVG 图 像 转换 成 PNG 版 本 。 
例如 Grunticon (https://github.com/filamentgroup/grunticon) 允许 你 上 传 一 组 
SVG 文件 和 生成 将 图 标 应 用 为 SVG 背景 的 CSS， 同 时 提供 备用 的 PNG 
片 和 对 应 的 CSS。 
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在 Adobe Ilustrator 中 ， 依 次 选择 文件 、 另 存 为 ， 在 格式 中 选择 SVG， 就 可 
以 创建 SVG 图 像 。 新 生成 的 SVG 文件 可 以 用 文本 编辑 器 进行 编辑 。 有 数 
个 输出 选项 可 供 选 择 (图 3-24) 。 















































SVG Options 

SVG Profiles: | SVG 1.1 | Ci 
外 

Fonts ct | 

Type: [SVG | ae 
Subsetting: | None (Use System Fonts) :| 一 一 -一 一 -一 一 一 一 一 一 
| More Options | 

Images 








Location: (®)Embed (OLink 








|_j Preserve lllustrator Editing Capabilities 





广 Description 
已 Hold the cursor over a setting for additional information. 








| Show SVG Code... 
| Web Preview... 


| Device Central... 











图 3-24: SVG 输出 选项 


通过 以 下 选项 可 以 创建 最 简单 (同时 也 是 最 小 ) 的 SVG 文件 ， 并 且 不 会 损 
失 质量 。 


。 SVG Profiles: SVG 1.1。 这 个 版 本 的 SVG 支持 情况 是 最 好 的 。 
。 Font Type: SVG。 

。 Subsetting: None (Use System Fonts ) 。 
。 Images: Embed。 将 所 有 的 位 图 都 谋 入 到 SVG 中 ， 而 不 是 创建 一 个 外 


























部 链接 。 
。 Preserve Illustrator Editing Capabilities: 不 选 。 在 网 站 上 使 用 SVG 时 
不 需要 这 个 功能 。 
在 下 面 这 个 例子 中 ， 我 用 Adobe Ilustrator 创建 了 一 个 SVG 格式 的 星星 (图 
$25), 
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图 3-25: SVG 格式 的 星星 


在 文本 编辑 器 中 打开 你 的 SVG 文件。 在 SVG 文件 中 你 可 能 需要 一 些 XML 
标记 ， 比 如 : 








<svg> 
<path/> 
</svg> 

















但 是 如 果 以 纯 文本 的 方式 打开 这 个 星星 的 文件 ， 可 以 看 到 Adobe Ilustrator 
在 SVG 中 生成 了 一 些 多 余 的 代码 : 


<?xml version="1.0" encoding="utf-8"?> 


<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . 
SVG Version: 6.00 Build 0) --> 


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 


<svg version="1.1" xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.o0rg/1999/xlink" x="Qpx" y="Qpx" 
width="20px" height="20px" viewBox="0 0 20 20" 
enable-background="new 0 0 20 20" xml:space="preserve"> 


<polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" 
points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 
15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592， 
8.112 8.015,8.112 "/> 


</svg> 





下 面 这 些 内 容 可 以 随意 从 导出 的 SVG 中 删除 。 在 浏览 器 中 这 些 内 容 并 没有 
实质 影响 ， 而 我 们 为 了 追求 性 能 需要 尽 可 能 地 优化 文件 大 小 : 











。 <!DOCTYPE>... 这 一 行 
。 <!-- Generator: Adobe Illustrator... 注释 
。 <?xml... 声明 
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也 可 以 使 用 Scour (http://codedread.com/scour/) 或 SVGO (https://github. 
com/svg/svg0o) 这 样 的 工具 自动 地 进行 精简 。 确 保 只 对 导出 的 SVG 而 不 是 
原始 文件 进行 这 些 精 简 工 作 。 














有 几 种 方法 可 以 将 SVG 图 像 应 用 到 网 站 上 。 你 可 以 在 img 标签 的 src 属性 
中 应 用 SVG: 








<img src="star.svg" width="83" /> 


SVG 图 像 会 被 生硬 地 拉 伸 为 你 所 设置 的 宽度 。 除 了 将 SVG 包含 在 HTML 
文档 中 ， 也 可 以 通过 CSS 将 它 设置 为 某 个 元 素 的 background 








.Star { 
background: url(star.svg); 
display: block; 
width: 83px; 
height: 83px; 
background-size: 83px 83px; 
} 


你 也 可 以 在 HTML 中 创建 行内 SVG: 
<body> 


<svg version="1.1" xmlns="http://www.w3.o0rg/2000/svg" 
xmlns:xlink="http://www.w3.0rg/1999/xlink" x="0Opx" y="Qpx" 
width="20px" height="20px" viewBox="0 0 20 20" 
enable-background="new 0 0 20 20" xml:space="preserve'"> 
<polygon fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" 
points="10,2.003 11.985,8.112 18.407,8.112 13.212,11.887 
15.196,17.996 10,14.221 4.803,17.996 6.789,11.887 1.592， 
8,.112 8,.015,8;112 "/S 
</svg> 


</body> 


某 些 网 站 在 使 用 SVG 图 像 时 ,会 将 它们 合并 到 一 个 图 标 字 体 中 ， 而 不 是 
应 用 在 CSS 或 image 标记 中 。IcoMoon (http://icomoon.io/) 等 工具 可 以 帮 
你 用 自己 的 SVG 图 像 创 建 自 定 义 的 字体 。 但 是 并 非 所 有 浏览 器 都 支持 医 
标 字 体 ， 并 且 在 不 支持 的 环境 中 很 难 创建 备用 方案 。 此 外 ，line-height 和 
font-size 会 让 单独 使 用 的 字体 图 标 变 得 更 加 复杂 ， 对 可 访问 性 来 说 也 是 挑 
战 (https://www.filamentgroup.com/lab/bulletproof _icon_fonts.html)。 
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邮 


的 确 ， 使 用 字体 会 让 修改 图 标 颜色 变 得 很 简单 ， 只 要 通过 修改 字符 对 应 的 
CSS 定义 中 的 cotor 属性 即 可 。 但 是 独立 的 SVG 图 像 更 易 使 用 ， 通 过 CSS 
的 fn1L 属性 ， 同 样 可 以 控制 行内 SVG 的 颜色 。 

















尽管 旧版 浏览 器 不 支持 SVG， 但 是 对 于 视网膜 屏幕 设备 的 超前 支持 ， 以 及 
为 了 支持 旧版 浏览 器 而 引入 的 简洁 的 工作 流 ， 比 如 Grumpicon (http://www. 
grumpicon.com) 或 Modernizr (http://modernizr.com/)， 让 SVG 成 为 了 一 个 
通过 替换 图 片 提升 网 站 性 能 的 绝 佳 选择 。 通 过 运行 SVG Optimiser (http:// 
petercollingridge.appspot.com/svg_optimiser) 等 压缩 工具 来 进一步 优化 SVG， 
可 以 简化 小 数 并 移 除 不 必要 的 字符 。 


用 行内 SVG 替换 图 像 与 使 用 data URI 所 带 来 的 副作用 是 一 样 : 额外 增加 
HTML 的 文件 体积 且 无 法 被 缓存 。 在 切换 到 SVG 的 版 本 之 前 ， 需 要 首先 测 
量 用 SVG 替换 图 像 给 网 站 性 能 带 来 的 影响 。 


3.3 图片 使 用 规划 和 改进 


网 站 中 图 片 的 效率 归根 结 底 是 由 设计 阶段 的 仔细 计划 决定 的 。 如 果 预 先知 
道 网 站 中 的 图 片 会 在 何 处 以 及 如 何 被 使 用 ， 就 可 以 提前 计划 透明 度 、 体 积 、 
渐变 以 及 如 何 减少 图 片 请 求 数量 等 。 


随 着 网 站 的 改进 ， 参 与 图 片 创作 和 更 新 的 设计 师 越 来 越 多 ， 图 片 文件 夹 中 
内 容 的 增长 可 能 会 失去 控制 。 有 一 些 方法 可 以 优化 图 片 的 文件 体积 和 总 数 ， 
并 保持 可 维护 性 ， 包 括 对 图 片 文件 夹 建立 日 常 检查 机 制 ， 优 化 页 面体 积 ， 
创建 样式 指南 ， 以 及 指导 其 他 的 图 片 创作 者 关于 图 片 优化 的 重要 性 。 













































































3.3.1 建立 日 常 检查 机 制 
通过 日 常 检 查 机 制 来 确定 哪些 图 片 可 以 被 复 用 、 合 并 或 者 导出 成 其 他 的 格 








日 
式 。 当 审查 主要 用 来 存放 装扮 网 站 的 图 片 的 文件 夹 时 ， 思 考 以 下 问题 。 


。 这 些 精 灵图 最 近 更 新 过 吗 ? 是 否 有 可 以 删除 的 过 期 图 片 ， 新 加 入 的 图 片 
是 否 需要 优化 ? 
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。 通过 使 用 新 的 浏览 器 技术 ， 或 者 用 户 中 使 用 现代 浏 览 器 的 人 越 来 越 多 ， 
图 像 中 的 某 些 内 容 是 否 可 以 用 诸如 CSS3、SVG 或 像 picturefill 这 样 
的 新 技术 来 替换 ? 

。 从 上 次 检查 到 现在 为 止 ， 所 有 新 增 的 图 片 是 否 都 使 用 了 合适 的 格式 ? 它 
们 是 否 足够 简化 ? 是 否 都 用 压缩 工具 处 理 过 了 ? 

。 是 否 所 有 图 片 都 缩放 到 了 合适 的 高 度 和 宽度 ? 是 否 有 图 片 在 显示 时 比 输 
出 的 尺寸 要 小 ? 是 否 需要 重新 输出 合适 的 尺寸 来 避免 额外 的 开销 ? 

















同样 ， 对 于 网 站 的 页 面体 积 也 可 以 进行 日 常 检查 。 广 意 页 面体 积 的 组 成 ， 
包括 图 片 大 小 的 占 比 是 多 少 。 如 有 果 页 面体 积 发 生 了 显著 增长 ， 找 到 原因 ， 
并 针对 文件 体积 进行 优化 。 在 第 6 章 中 会 介绍 更 多 关于 如 何 测量 和 优化 页 
面体 积 及 其 他 性 能 指标 的 内 容 。 


3.3.2 ”创建 样式 指南 
样式 指南 可 以 作为 网 站 图 片 创 作 的 参考 ， 特 别 是 对 图 标的 含义 和 精灵 图 的 
使 用 来 说 ， 样 式 指 南 是 最 有 效 的 说 明 。 它 可 以 包括 如 下 内 容 。 


。 在 HTML 中 显示 不 同 图 标 时 所 对 应 的 类 名 。 

。 图 标 用 法 及 含义 的 定义 ， 这 样 设计 师 和 开发 者 才能 在 页 面 中 创造 出 统一 
的 用 户 体验 ， 同 时 从 使 用 缓存 的 图 片 中 受益 。 

。 CSS 渐变 的 例子 及 其 他 可 以 用 来 改进 网 站 性 能 的 技术 ， 这 样 其 他 人 都 可 
以 直接 复 用 而 无 需 开 发 自己 的 版 本 ， 避 免 匈 余 的 CSS 文件 。 

。 关于 所 文 持 浏览 器 的 权威 指南 ， 这 样 设计 师 和 开发 者 可 以 了 解 CSS 中 必 
须 使 用 什么 样 的 语法 以 及 如 何 进 行 测试 。 










































































除了 图 片 相关 的 文档 外 ， 样 式 指 南 对 于 页 面 加 载 时 间 来 说 还 有 很 多 额外 的 
好 处 。 在 4.4.1 节 中 ， 我 们 会 介绍 样式 指南 如 此 有 用 的 原因 ， 以 及 它 可 以 包 
含 的 其 他 内 容 。 


3.3.3 ”指导 其 他 的 图 片 创作 者 

通常 情况 下 ， 你 不 是 唯一 会 为 网 站 创作 并 更 新 图 片 的 人 。 很 可 能 还 有 很 多 
其 他 的 设计 师 和 开发 者 需要 了 解 这 些 技术 ， 其 他 内 容 创作 者 也 可 能 并 不 次 
说 图 片 创作 方法 。 
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确保 针对 网 站 上 的 新 图 片 有 一 个 良好 的 工作 流程 。 对 于 负责 添加 图 片 的 设 
计 师 和 开发 者 ， 确 保 他 的 工作 流程 中 包含 这 样 一 个 步骤 : 通过 质量 检测 和 
额外 的 图 片 优化 实现 美观 和 性 能 的 平衡 。 图 片 优化 的 过 程 应 该 尽 可 能 自动 
化 ， 这 样 创作 者 才 不 会 觉得 工作 流程 见长 乏味 。 



































同 其 他 为 网 站 贡献 力量 的 人 分 享 相 关 的 知识 是 很 重要 的 ， 这 样 你 才 不 是 唯 
一 的 “性 能 警察 ”或 “性 能 卫士 ”。 帮 助 他 人 理解 他 们 对 网 站 加 载 性 能 的 影 
响 ， 这 对 图 片 内 容 的 优化 是 非常 有 帮助 的 。 可 以 在 第 8 章 中 阅读 更 多 关于 
如 何 激 励 他 人 在 性 能 方面 有 所 作为 的 内 容 。 


再 次 强调 ， 优 化 图 片 对 于 网 站 性 能 优化 来 说 可 能 是 最 主要 的 优化 点 。 当 
查 网 站 中 的 图 片 时 ， 思 考 以 下 问题 。 






































下 





























。 使 用 不 同 的 图 片 格式 是 否 能 节约 文件 体积 ? 

。 所 有 的 图 片 都 用 压缩 工具 处 理 过 了 吗 ? 

。 使 用 CSS3 渐变 、data URI、SVG 文件 或 精灵 图 是 否 是 更 好 的 选择 ? 

。 图 片 中 是 否 有 过 多 的 噪点 或 颗粒 感 ， 或 者 有 任何 其 他 方法 能 减少 图 片 中 
的 颜色 数量 吗 ? 

。 怎样 保证 新 添加 的 图 片 已 经 优化 过 ? 






































在 创作 图 片 的 过 程 中 ， 应 该 始终 关注 视觉 美感 和 性 能 之 间 的 平衡 (在 第 7 
章 中 阅读 更 多 相关 内 容 )。 有 了 时 可 能 需要 导出 一 个 体积 略微 大 一 点 的 图 片 ， 
这 样 视觉 效果 会 显 车 提升。 有时， 通过 复 用 颜色 和 图 标 可 以 节省 大 量 的 加 
载 时 间 ， 而 不 必 创 建 只 有 细微 差别 的 图 片 版 本 。 重 要 的 是 ， 在 创作 图 片 的 
过 程 中 ， 时 刻 将 性 能 记 在 脑 中 ， 做 出 最 合适 的 决策 。 



































在 下 一 章 中 ， 我 们 将 讨论 如 何 优化 HTML 和 CSS。 同 图 片 一 样 ， 关 注 
HTML 标记 的 大 小 并 了 解 它 是 如 何在 浏览 器 中 泻 染 的 ， 对 于 优化 页 面 加 载 
时 间 至 关 重 要 。 我 们 可 以 精简 HTML 和 CSS， 想 方 设法 记录 并 复 用 设计 模 
式 来 保持 页 面 的 整洁 ， 并 优化 这 些 资源 的 加 载 。 精 简 HTML 和 CSS 通常 也 
会 带 来 更 简洁 的 样式 表 和 图 片 。 作 为 一 名 设计 师 ， 你 所 扮演 的 角色 是 非常 
独特 的 ， 可 以 为 网 站 创造 高 性 能 、 易 编辑 、 可 复 用 的 HTML 标记。 
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第 4 章 


优化 HTML 标 记 和 样式 








虽然 在 网 页 的 体积 中 占 比 最 大 的 通常 是 图 片 资源 ， 但 是 调用 和 实现 图 片 的 
HTML 和 CSS 同样 对 页 面 加 载 时 间 有 很 大 的 影响 。 合 理 的 HIML 结构 和 命 
名 ， 可 以 让 网 站 更 易 维护 并 且 性 能 优异 ;优秀 的 CSS 结构 和 设计 模式 ， 可 
以 让 你 专注 于 复 用 性 以 及 网 站 的 视觉 和 感受 的 意义 。 保 持 HTML 和 CSS 整 
洁 、 有 意义 ， 可 以 让 网 站 的 加 载 速度 更 快 ， 整 体 用 户 体 验 更 好 。 在 这 一 章 
中 ， 我 们 会 介绍 与 加 载 HIML、CSS、 字 体 和 JavaScript 相关 的 最 佳 实践 。 











4.1 简化 HTML 


简化 HTML 是 建设 高 性 能 网 站 的 基础 。 老 旧 的 网 站 在 设计 师 和 开发 者 中 几 
经 易手 ， 很 多 人 都 曾 编辑 或 添加 过 HTML 标记 ， 但 是 新 建 的 网 站 也 可 以 从 
整理 中 受益 ， 比 如 寻找 内 艇 或 行内 的 样式 、 无 用 或 非 必 需 的 元 素 ， 以 及 粳 
糕 的 类 和 ID 命名 等 。 

在 第 1 章 中 提 到 ， 我 曾经 仅仅 通过 整理 一 个 页 面 的 标记 和 样式 就 使 其 加 
载 时 间 减 少 了 一 半 。 我 集中 清理 了 宛 余 的 HIML 和 CSS， 结 果 减 少 了 
HTML、CSS 以 及 样式 表 图 片 文 件 的 体积 。 



























































当 观 察 网 站 的 HTML 时 ， 广 意 以 下 几 方 面 : 
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。 应 该 放 在 样式 表 文 件 中 的 内 艇 和 行内 样式 

。 对 于 特定 样式 无 用 的 元 素 (不 必要 的 HTML 元 素 ， 也 就 是 “过 度 杠 套 ”， 
会 在 下 一 节 中 介绍 ) 

。 可 以 删除 的 过 期 或 被 注释 掉 的 代码 


如 果 有 多 个 开发 者 或 设计 师 编 辑 过 某 个 网 站 ， 那 么 很 可 能 存在 未 被 使 用 或 
不 必要 的 HTML 标记 。 随 着 网 站 的 发 展 ， 使 用 表格 进行 布局 等 老 旧 技术 鲜 
少 被 清理 ， 或 有 更 新 的 最 佳 实践 可 以 取代 。 在 清理 元 余 或 过 期 的 HTML 时 
必须 毫 不 留情 。 以 防 万 一 ”并 不 是 保留 不 必要 或 复杂 的 标记 的 好 理由 ， 最 
好 删除 它们 ， 并 且 牢 记 ， 如 有 果 未 来 真 的 还 需要 使 用 它们 ， 可 以 通过 版 本 控 
制 找 回 这 些 代 码 。 











4.1.1 过 度 舱 套 

“过 度 峙 套 ”(divitis) 是 指 HTML 中 的 很 多 元 素 除 了 对 内 容 应 用 样式 之 外 没 
有 其 他 用 途 。 过 度 租 大 ,通常 发 生 在 使 用 很 多 div 元 素 而 不 是 更 加 有 意义 和 
语义 化 的 HTML 元 素 时 ， 但 实际 上 任何 HTML 元 素 的 不 当 使 用 都 可 能 导致 
过 度 先 套 : 











<div> 
<div> 
<header> 
<div id="header"> 
<h1><span>Site Name</span></h1> 
</div> 
</header> 
</div> 
</div> 





上 面 的 例子 中 需要 这 么 多 元 素 的 原因 并 不 明确 ， 也 许 是 由 于 给 span 设置 样 
式 时 发 生 了 什么 有 趣 的 现象 ， 也 可 能 是 由 于 这 些 div 对 页 面 结构 来 说 是 有 
意义 的 。 但 无 论 如 何 ， 这 是 代码 出 现 问题 的 明确 信号 ， 并 且 应 该 重新 审视 。 
过 度 舱 套 通 常 发 生 在 以 下 情况 中 : 代码 作者 被 样式 的 舱 套 逻辑 所 迷惑 ， 并 
是 在 试图 覆盖 元 素 的 样式 时 ， 通 过 添加 额外 的 父 元 素来 匹配 CSS。 


















































HTML 标记 中 不 应 该 出 现 过 度 嵌 套 。 过 度 俱 套 会 导致 HTML 和 CSS 代码 的 
匈 余 ， 移 除 多 余 的 元 素 可 以 让 代码 更 加 清晰 ， 继 承 关系 更 加 直观 。 尽 可 能 
使 用 HTMLS5 元 素 (比如 header 和 article) 来 创建 语义 化 的 结构 。 这 样 在 
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书写 CSS 代码 时 更 加 容易 ， 并 且 也 可 以 为 创建 可 复 用 的 设计 模式 带 来 便利 。 


为 了 避免 过 度 雁 套 ， 需 要 仔细 其 酌 元 余 代 码 区 元 素 采 用 的 样式 。 考 虑 是 否 
可 以 合并 样式 声明 并 将 其 应 用 到 正确 、 语 义 化 的 元 素 上 ， 以 此 来 获得 更 好 
的 HTML 结构 ， 比 如 : 








<header> 
<h1>Site Name</h1> 
</header> 


或 者 简化 为 : 
<h1>Site Name</h1> 


有 时 ， 需 要 为 了 布局 和 语义 化 结构 适当 地 保留 元 素 ， 比 如 本 例 中 的 header 
元 素 。 但 通常 ， 审 查 并 简化 页 面 中 的 元 素 会 给 你 带 来 惊喜 ! 得 益 于 HTML5 
和 CSS 的 强大 功能 ， 你 可 以 获得 更 加 稳定 、 轻 量化 的 HTML 结构 。 





4.1.2 语义 化 

语义 标签 是 指 那 些 名 字 可 以 代表 其 包含 的 内 容 的 标签 。 良 好 的 语义 化 标签 
选择 包括 具有 代表 性 的 header 和 nav 等 HTML5 元 素 ， 以 及 命名 为 login 
或 breadcrumbs 等 的 类 或 ID 名。 避免 诸如 Left 或 blue 这 样 描述 内 容 的 样 
式 和 感觉 而 非 具体 意义 的 无 语义 命名 。 


将 元 素 用 语义 化 重 命名 ， 可 以 帮助 创建 更 好 的 页 面 结 构 ， 也 对 创建 全 站 可 
复 用 的 设计 模式 有 益 。 例 如 ， 下 面 的 HTML 结构 不 仅 无 语义 ， 而 且 还 过 度 
租 套 : 





<div class="right"> 
<div id="form"> 
<form> 

<p class="heading">Login</p> 

<p> 
<label for="username">Username:</label> 
<input type="text" id="username" /> 

</p> 

<p> 
<label for="password">Password:</label> 
<input type="text" id="password" /> 

</p> 





太后 
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<input type="submit" value="Submit" /> 
</form> 
</div> 
</div> 


下 面 是 这 个 侧 边栏 和 登录 框 的 样式 .: 





form { 
background: #ccc; 


} 


.right { 
float: right; 
width: 200px; 
} 


#form form { 
border: 1px #ccc solid; 
background: yellow; 
padding: 10px; 


} 

.heading { 
font-weight: bold; 
font-size: 20px; 

} 


目前 的 命名 方式 毫 无 意义 ，:right 类 的 样式 很 可 能 在 样式 表 中 的 其 他 地 方 
被 无 意 履 盖 ， 也 很 容易 忽视 它 影 响 了 使 用 该 类 名 的 其 他 元 素 。 


同时 ， 也 不 清楚 哪些 样式 是 能 够 复 用 的 。 在 这 段 CSS 中 ， 我 们 给 #form 设 
置 了 backgound， 却 又 在 接 下 来 把 同一 个 登录 表单 的 背景 颜色 给 覆盖 了 。 看 
上 去 我 们 是 想 要 突出 这 个 登录 表单 。 通 过 重 命名 和 调整 结构 ， 使 其 更 加 语 
义 化， 我 们 可 以 创造 出 更 易于 理解 的 CSS 文件 和 潜在 设计 模式 。 























<div class="sidebar"> 
<form id="login"> 
<h2>Login</h2> 
<ul> 
lis 
<label for="username">Username:</label> 
<input type="text" id="username" /> 
</li> 
<li> 
<label for="password">Password:</label> 
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<input type="text" id="password" /> 
</li> 
<li><input type="submit" value="Submit" /></li> 
</ul> 
</form> 
</div> 


我 们 用 一 个 更 加 语义 化 的 结构 和 命名 规则 取代 了 先前 无 语义 的 结构 。 现 在 
我 们 有 了 一 个 侧 边 栏 ， 清 晰 直接 的 表单 名 称 ， 以 及 用 无 序列 表 组 织 起 来 的 
表单 元 素 。 虽 然 CSS 代码 略微 增加 了 ， 但 使 代码 整体 上 更 简洁 了 。 

form { 


background: #ccc; 


} 


form ul { 
list-style-type: none; 
padding: 0; 

} 


h2 { 
font-weight: bold; 
font-size: 20px; 


} 


.Sidebar { 
float: right; 
width: 200px; 

} 


#login { 
border: 1px #ccc solid; 
background: yellow; 
padding: 10px; 


如 你 所 见 ， 这 样 可 以 方便 地 使 全 站 表单 中 的 无 序列 表 样 式 保 持 一 致 。 同 
样 ， 登 录 表单 的 头 部 (例子 中 的 h2) 应 该 同 页 面 中 的 同 级 头 部 样式 保持 一 
致 。.sidebar 的 样式 在 样式 表 后 续 的 编辑 中 很 难 被 覆盖 ， 而 要 ogin 也 可 以 
保持 它 独 特 的 样式 。 尽 管 在 我 们 的 例子 中 CSS 代码 会 因此 而 略 有 增加 ， 但 
这 有 助 于 精简 CSS 文件 其 他 地 方 的 代码 ， 因 为 可 以 避免 其 他 的 样式 覆盖 表 
单 和 段落 的 代码 而 使 其 看 起 来 像 一 个 头 部 元 素 。 


语义 化 的 命名 使 得 老 旧 的 HTML 和 CSS 代码 更 易 维护 ， 因 为 它 易于 阅读 、 
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测试 以 及 反复 编辑 。 精 简 HTML 和 CSS 通常 会 减 小 文件 体积 ， 让 页 面 加 载 
更 快 ， 同 时 也 降低 了 页 面 随 着 时 间 流 进而 变 得 腾 肿 的 风险 。 因 为 语义 化 结 
构 的 意义 更 加 明确 ， 所 以 更 容易 创建 可 复 用 的 设计 和 样式 ， 给 终端 用 户 提 
供 更 好 的 体验 。 











4.1.3 可 访问 性 

语义 化 标签 除了 可 编辑 性 以 及 性 能 方面 的 优势 ， 简 洁 的 HTML 标签 对 有 无 
障碍 性 需求 的 用 户 也 有 帮助 。 语 义 化 的 HTML 标签 使 内 容 的 层次 结构 对 浏 
览 器 、 搜 索引 擎 和 读 屏 器 具有 意义 。 使 用 新 的 post 和 aside 等 HTML5 标 
签 ， 通 过 既 有 的 标题 、 段 落 和 列表 等 语义 化 结构 进行 实施 ， 网 络 上 的 内 容 
会 变 得 对 所 有 人 都 更 易于 阅读 。 搜 索引 擎 机 器 人 和 为 视 障 人 士 设 计 的 读 屏 
器 主要 会 审视 HTML 中 的 内 容 ， 而 非 应 用 CSS 后 页 面 在 浏览 器 中 的 视觉 
音 式 或 JavaScript 动画 和 交互 。HTML 标记 越 简洁 和 语义 化 ， 用 户 体验 也 
就 越 好 。 














全 





针对 如 何 让 网 站 更 易于 残障 人 士 访 问 ，Web 内 容 无 障碍 指南 (Web Content 
Accessibility Guidelines，WCAG) 提供 了 很 多 的 指导 。 如 果 你 的 HIML 结 
构 简 洁 且 语义 化 ， 说 明 你 正在 使 网 站 易于 访问 。 万 维 网 协会 (World Wide 
Web Consortium，W3C) 提供 了 完整 的 WCAG 2.0 (http:/www.w3.org/ 
WAILWCAG20/quickref/) 清单 ， 来 帮助 你 理解 并 达到 当前 WCAG 的 要 求 。 
































4.1.4 框架 和 网 格 系统 

网 络 上 有 很 多 框架 和 网 格 工具 可 以 帮助 设计 师 和 开发 者 无 需 从 零 开 始 创 
建 一 个 网 站 。Bootstrap、HTML5 Boilerplate 和 960 Grid 都 是 很 好 的 CSS、 
HTML 和 JavaScript 基础 框架 ， 可 以 帮助 你 开始 网 站 的 设计 工作 。 





但 是 ， 使 用 框架 和 网 格 系统 是 有 代价 的 。 它 们 的 设计 旨 在 满足 大 量 常 见 的 
使 用 场景 ， 因 此 包含 了 大 量 你 的 网 站 并 不 需要 的 内 容 。 这 些 元 余 内 容 给 网 
站 加 载 时 间 带 来 的 负面 影响 ， 可 能 比 对 开发 效率 的 提升 还 要 大 ， 如 果 在 实 
现 网 格 和 框架 的 过 程 中 不 加 以 注意 ， 有 可 能 会 在 加 载 网 站 时 引入 过 多 非 必 
需 的 资源 、HTML 标记 或 样式 。 












































下 面 是 HIML5 Boilerplate 中 的 样式 的 示例 代码 。 这 些 样式 对 于 使 用 了 dfn、 
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hr 和 mark 元 素 的 网 站 是 很 有 用 的 ， 但 是 对 于 没有 使 用 这 些 元 素 的 网 站 来 讲 
则 是 元 余 内 容 。 


* 修正 safari 5 和 Chrome 中 没有 样式 的 问题 。 
yh 


dfn { 
font-style: italic; 
} 
/** 
* 修正 Firefox 和 其 他 浏览 器 之 间 的 差异 。 


* 已 知 问题 :不 支持 IE6/7。 
*/ 


hr { 
-moz-box-sizing: content-box; 
box-sizing: content-box; 
height: 0; 





} 


/** 
* 修正 IE6/7/8/9 中 没有 样式 的 问题 。 
*/ 


mark { 
background: #ff0; 
color: #000; 

} 


如 果 一 定 要 使 用 框架 ， 在 用 户 加 载 之 前 确保 将 这 些 多 余 的 资源 从 网 站 中 删 
掉 。 记 住 ， 网 格 和 框架 无 法 提供 我 们 所 和 希望 的 语义 化 结构 ， 因 为 它们 更 加 
普 适 和 通用 。 有 些 框架 ， 如 HIML5 Boilerplate， 提 供 了 自 定义 构建 选项 
(如 图 4-1 所 示 )， 你 应 该 好 好 利用 。 


在 使 用 了 现成 的 网 格 和 框架 之 后 ， 应 该 尽 可 能 地 精简 命名 并 整理 页 面 
元 素 的 结构 。 无 论 如 何 ， 都 不 应 该 强迫 用 户 加 载 多 余 的 样式 、 标 签 和 


JavaScript。 














Be 


HTML/CSS Template 


OO Notemplate 
加 Mobile-first Responsive 


DO Twitter Bootstrap 


回 IE Classes 
加 Old browser warning 
加 Google Analytics 


口 htaccess 


wetter 





1- Pre-configuration 


2- Fine tuning 
HTMLS Polyfills 


@ Modemnizr 
JustHTML5shiv 


回 Respond - Alternatives 


H5BP 0ptional 


回 Favicon 
加 Apple Touch Icons 
pluginsjs 


Robots .bd 


juuery 
回 Minifed 
了 Development 
_] Humans.txt 
口 404 Page 


] Adobe Cross Domain 








图 4-1:， 有 些 框架 提供 了 自 定义 构建 选项 ， 比 如 这 个 来 自 Initializr (http:// 
www.initializr.com) 的 HTML5 Boilerplate 自 定义 工具 。 可 以 利用 
这 些 工具 来 缩减 多 余 的 标签 、 样 式 和 脚本 


4.2 简化 CSS 


经 过 深思 熟 虑 的 HTML 结构 和 审慎 实施 的 网 站 布局 和 设计 ， 可 以 帮助 你 获 
得 简洁 、 易 于 编辑 并 且 性 能 优异 的 CSS。 当 你 尝试 精简 现 有 的 CSS 时 ， 可 
以 考虑 它们 是 否 可 以 反映 HTML 的 结构 和 设计 意图 。 可 能 会 发 现 : 





。 元 素 命 名 没有 语义 

。 使 用 了 !important 声明 
。 对 个 别 浏览 器 做 了 hack 
。 使 用 过 多 不 同 的 选择 器 


找到 那些 未 使 用 的 元 素 ， 可 以 合并 或 用 更 高 效 的 方式 替代 的 样式 ， 以 及 过 
时 的 浏览 器 兼容 方法 。 随 着 网 站 的 增长 ， 我 们 需要 经 常 重 构 CSS， 考 虑 用 
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新 技术 来 提升 页 面 加 载 时 间 。 考 虑 网 站 结构 以 及 设计 意图 时 越 慎重 ，CSS 
就 会 越 简洁 。 代 码 的 可 维护 性 和 网 站 性 能 都 会 得 到 提升 。 


4.2.1 未 使 用 的 样式 

对 现 有 的 网 站 来 说 ， 精 简 CSS 的 首要 任务 就 是 移 除 未 使 用 的 样式 。 随 着 网 
站 的 发 展 ， 未 使 用 的 样式 会 在 不 经 意 间 增多 ， 使 样式 表 变 得 腔 肿 。 被 删除 
的 元 素 或 页 面 ， 重 命名 或 重新 设计 的 元 素 ， 以 及 已 经 被 第 三 方 组 件 取 代 的 
不 再 使 用 的 元 素 ， 都 会 产生 多 余 的 样式 。 没 有 理由 保留 样式 表 中 这 些 未 使 
用 的 选择 器 和 样式 ， 也 不 应 该 强迫 用 户 下 载 它们 。 利 用 版 本 控制 及 时 回顾 
历史 版 本 ， 审 查 旧 的 CSS 代码 。 






































有 很 多 工具 可 以 用 来 查找 潜在 的 元 余 CSS 代码 。Dust-Me Selectors (http:// 
www.brothercake.com/dustmeselectors/) 是 Firefox 和 Opera 浏览 器 中 的 一 个 
插件 ， 可 以 扫描 HTML 来 找到 未 使 用 的 选择 器 。 在 Chrome 的 开发 者 工具 
中 ，Audits 面板 (图 4-2) 可 以 运行 Web Page Performance 审查 工具 ， 来 找 
到 未 使 用 的 CSS 规则 。 











Q Elements Network Sources Timeline Profiles Resources |Audits| Console 





|v Web Page Performance 


(2 Audits 
®@ » Optimize the order of styles and scripts (1) 
RESULTS | 7 Remove unused CSS rules (21) 
21 rules (40%) of CSS not used by the current page. 
v light.css: 40% is not used by the current page, 
| #ux h2, .slides h2 

#ux h3:before 

launched h3:before 

"Slides h3 

Slides h3:before 

‘Slides 

resources div 

.designingforperf .resources div:nth-child(2) 

.resources ul 

‘resources li 

#faces ul, #donuts ul 

#faces li, #donuts li 

#faces img 

#donuts 1i 

#donuts 1i 

#ux h2, .slides h2 

#faces li 

#donuts 

resources div 

#donuts li 

| #donuts img 











图 4-2: Chrome 开发 者 工具 可 以 在 任意 页 面 中 运行 Web Page Performance 
审查 工具 。 审 查 结果 中 包含 了 一 个 可 以 清除 的 未 使 用 的 CSS 规则 列表 
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使 用 这 些 工具 时 需要 警惕 ，Dust-Me Selectors 可 能 
面 ，Chrome 开发 者 工具 也 只 会 分 析 当 前 页 面 (不 包 

表 的 页 面 ) 的 CSS 选择 器 
可 以 用 来 测试 哪些 样式 是 可 以 删除 的 。 


青 简 样 式 


























4.2.2 合并 及 六 
网 站 中 同一 
准 。 检 查 样式 表 ， 











` 会 抓 取 网 站 的 全 部 页 
含 其 他 使 用 同一 份 样式 


这 些 工 具 对 于 获取 一 份 初始 列表 是 很 有 帮助 的 ， 


个 元 素 没 有 重复 的 样式 定义 ， 是 样式 一 致 和 设计 审慎 的 重要 标 
寻找 合并 或 精简 这 些 样式 的 机 会 ， 


因为 这 样 可 以 提升 代 


码 的 性 能 和 可 维护 性 。 下 面 的 代码 中 有 两 个 样式 相近 的 元 素 : 


.recipe { 
background: #f5f5f5; 
border-top: 1px #ccc solid; 
padding: 10px; 
margin: 10px 0 0; 
font-size: 14px; 


} 


.COmment { 
background: #f5f5f5; 
border-top: 1px #ccc solid; 
padding: 10px; 
margin: 9px 0 0; 
font-size: 13px; 


} 


二 者 之 间 的 差异 很 小 ， 只 有 .comment 的 font-size 和 margin 不 同 。 我 们 可 
以 将 这 些 样式 合并 进 一 个 主 声 明 块 ， 然 后 单独 为 .comment 设置 不 同 的 样式 : 


.recipe, .comment { 
background: #f5f5f5; 
border-top: 1px #ccc solid; 
padding: 10px; 
margin: 10px 0 0; 
font-size: 14px; 


} 


.Comment { 
margin: 9px 0 0; 
font-size: 13px; 


} 
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或 者 可 以 问 自己 : .comment 为 什么 需要 一 个 些许 不 同 的 字体 大 小 和 下 外 边 
距 呢 ? 如 果 把 .comment 和 .recip 的 样式 合并 在 一 起 创建 一 个 模式 呢 ? 这 样 
复杂 度 会 降低 ， 可 维护 性 会 提高 ， 同 时 CSS 文件 也 会 更 小 ! 

















.recipe, .comment { 
background: #f5f5f5; 
border-top: 1px #ccc solid; 
padding: 10px; 
margin: 10px 0 0; 
font-size: 13px; 


} 


如 果 你 发 现 这 个 模式 被 重复 使 用 ， 也 可 以 尝试 把 类 名 改 得 更 通用 ， 以 便 在 
整个 网 站 范围 内 复 用 ， 而 无 需 继 续 在 选择 器 中 用 逗号 添加 新 的 类 名 。 


很 多 原因 都 可 能 造成 共享 大 部 分 样式 的 元 素 之 间 具 有 细微 的 差别 : 像素 级 
精准 的 PSD 原型 的 Web 实现 ， 偶 然 对 一 个 已 经 存在 的 样式 进行 了 更 新 等 。 
在 整个 样式 表 中 可 以 找到 很 多 不 同 的 高 度 、 宽 度 和 内 外 边 距 等 的 定义 。 它 
们 是 有 意 定 义 成 和 消 有 不 同 的 值 吗 ? 可 以 把 它们 标准 化 吗 ? 


寻找 这 些 机 会 来 进行 标准 化 并 创建 模式 。 假 定 这 些 元 素 被 有 意 设计 成 相同 
的 样式 和 感觉 ， 未 来 当 某 一 个 元 素 的 设计 发 生变 化 时 ， 你 可 能 希望 其 他 的 
元 素 也 发 生 相 同 的 变化 。 合 并 这 些 定义 并 创建 共享 的 样式 ， 可 以 在 未 来 市 
省 开发 时 间 ， 同 时 更 短 的 CSS 文件 也 有 助 于 提升 加 载 速度 。 


此 外 ， 你 可 以 开始 制定 容易 遵循 的 间距 和 字体 大 小 等 规则 。 首 先 规定 基准 
的 font-size， 其 他 的 设计 决策 以 此 为 基础 ， 这 是 一 个 让 制定 规则 的 过 程 
变 得 简单 的 好 方法 。 如 果 主 要 内 容 的 字体 大 小 是 14 px，line-height 为 
1.4 em， 通 过 简单 的 计算 可 以 制定 出 以 下 规则 : 

。 头 部 元 素 的 字体 大 小 为 14 px 的 倍数 

。 内 外 边 距 为 1.4 em 的 倍数 

。 自 定义 的 网 格 系统 宽度 以 14 px 或 1.4 em 为 单位 增加 

CSS 允许 你 充分 发 挥 样式 简写 声明 的 优势 。 例 如 backgound 这 个 简写 定义 ， 
在 一 行 中 可 以 包含 很 多 独立 的 样式 值 。backgound 声明 可 以 包含 以 下 内 容 : 



























































。 background-clip 
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。 background-color 

。 background-image 

。 background-origin 

。 background-position 
。 background-repeat 

。 background-size 


。 background-attachment 


使 用 background， 你 可 以 对 其 中 的 一 个 或 多 个 其 至 全 部 值 进行 设置 。 利 用 
这 样 的 简写 声明 ， 未 来 更 容易 合并 和 精简 CSS 代码。 例如， 假设 我 们 有 三 
个 样式 相似 的 元 素 ， 仅 仅 边框 和 内 边 距 有 少许 差异 : 


.recipe { 
background: #f5f5f5; 
margin: 10px 0 0; 
border: 1px #ccc solid; 
padding: 10px 0; 

} 


.COmment { 
background: #f5f5f5; 
margin: 10px 0 0; 
border: 1px #fff solid; 
padding: 10px 0 0; 

} 


aside { 
background: #f5f5f5; 
margin: 10px 0 0; 
border: 2px #ccc solid; 
padding: 10px 0; 

} 


我 们 可 以 用 简写 声明 来 对 元 素 之 间 相 同 的 样式 进行 定义 ， 再 用 普通 写法 来 
设置 那些 不 太一 样 的 属性 : 





.recipe, .comment, aside { 
background: #f5f5f5; 
margin: 10px 0 0; 
border: 1px #ccc solid; 
padding: 10px 0; 

} 
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.COmment { 
border-color: #fff; 
padding-bottom: 0; 

} 


aside { 
border -width: 2px; 
} 


这 样 我 们 的 CSS 会 更 加 易 读 。 如 果 用 简写 的 border 重复 对 .comment 进行 
声明 ， 很 难 指出 同 最 初 的 声明 之 间 有 什么 差异 。 使 用 普通 形式 的 属性 ， 可 
以 很 容易 地 聚焦 在 需要 修改 的 样式 上 。 简 写 属性 可 以 减少 CSS 代码 行 数 ， 
对 性 能 有 好 处 。 














有 时 ， 对 元 素 重 命名 可 以 帮助 你 合并 及 精简 样式 。 如 以 下 这 些 样式 相近 的 
元 素 : 


h3 { 
color: #000; 
font-weight: bold; 
font-size: 1.4em; 
margin-bottom: 0.7em; 


} 


#subtitle { 
color: red; 
font-weight: bold; 
font-size: 1.4em; 
margin-bottom: 0.7em; 


上 


.note { 
COLor : #333; 
font-weight: bold; 
font-size: 1.4em; 
margin-bottom: 0.7em; 


} 
<h1>My page title</h1> 


<article> 
<h2>My article title</h2> 
<div id="subtitle">My article’s subtitle</div> 
<p>...</p> 

</article> 
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<aside> 
<div class="note">I have a side note</div> 


<p>...</p> 
</aside> 


<footer> 
<h3>My footer also has a title</h3> 
</footer> 
在 这 个 例子 所 示 的 情况 中 ， 对 元 素 进行 重 命名 ， 不 仅 可 以 创建 更 加 语义 化 
的 结构 ， 同 时 CSS 也 可 以 更 加 简洁 。 请 发 挥 你 的 判断 力 。 在 这 个 例子 中 ， 
我 们 认为 #subtitle、.note 和 h3 实际 上 具有 相同 的 语义 ， 即 页 面 中 的 三 级 


标题 ， 因 此 可 以 在 HTML 中 对 它们 重 命名 : 

















<h1>My page title</h1> 


<article> 
<h2>My article title</h2> 
<h3>My article's subtitle</h3> 


<p>...</p> 
</article> 


<aside> 
<h3>I have a side note</h3> 


<p>...</p> 
</aside> 


<footer> 
<h3>My footer also has a title</h3> 


</footer> 
通过 在 HTML 中 对 它们 重 命名 ， 自 动 地 将 原始 CSS 中 的 样式 进行 了 合并 ， 
现在 它们 都 属于 h3 样式 块 。 通 过 添加 特定 的 选择 器 ， 可 以 修改 article 和 
aside 中 的 头 部 元 素 的 颜色 : 











h3 { 
color: #000; 
font-weight: bold; 
font-size: 1.4em; 
margin-bottom: 0.7em; 


} 


article h3 { 
color: red; 
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} 


aside h3 { 
color: #333; 
} 


最 后 ， 如 果 你 有 使 用 LESS 或 SASS 等 CSS 预 处 理 器 ， 生 成 的 代码 可 能 也 
是 元 余 的 ， 有 大 量 重 定义 和 压缩 的 机 会 。 经 过 深思 熟 虑 的 、 可 复 用 的 设计 
模式 ， 可 以 帮助 你 更 好 地 使 用 预 处 理 器 来 开发 CSS。 尽 可 能 使 mixin (只 需 
定义 一 次 即 可 反复 使 用 的 样式 块 ) 保持 高 效 ， 并 随时 审查 生成 的 样式 代码 。 
文件 体积 可 能 在 不 经 意 间 就 变 得 腔 有 种 了 ， 所 以 需要 定期 不 断 地 检查 CSS 的 
效率 。 


4.2.3 精简 样式 图 片 

对 样式 进行 合并 和 精简 后 ， 下 面 来 看 看 样式 表 中 使 用 的 图 片 。 图 片 占据 了 
大 部 分 网 站 体积 中 很 大 一 部 分 ， 所 以 时 刻 牢 记 ， 减 小 图 片 体积 ， 缩 减 请 求 
数量 ， 可 以 给 网 站 的 加 载 速度 带 来 巨大 的 提升 。 


首先 ， 尝 试 使 用 精灵 图 。 如 果 你 在 整个 网 站 中 大 量 使 用 了 图 标 和 其 他 小 图 
片 ， 精 灵图 对 减少 请 求 数量 会 非常 有 帮助 。3.2.1 市 中 有 关于 使 用 精灵 图 提 
升 性 能 以 及 实现 方法 的 详细 内 容 。 


其 次 ， 随 着 站 点 的 增长 ， 精 灵图 的 数量 也 会 增加 。 现 有 的 精灵 图 中 可 能 包 
含 已 经 不 再 使 用 的 或 过 期 的 图 片 。 检 查 现 有 的 精灵 图 : 有 任何 可 以 删除 的 
部 分 吗 ? 这 些 部 分 的 CSS 是 否 也 可 以 清理 掉 ? 可 以 清理 图 片 并 将 它们 重新 
输出 成 更 合适 的 文件 类 型 或 更 高 压缩 比 的 图 片 吗 ? 精灵 图 越 精简 ， 页 面 的 
加 载 速度 就 越 快 。 


接 下 来 ， 尝 试用 CSS3 渐变 、data URI 或 SVG 来 代替 样式 表 中 的 图 片 。 
3.2.2 节 中 有 更 多 关于 如 何 创 建 CSS3 渐变 的 内 容 ，3.2.4 节 中 有 更 多 关于 如 
何 创建 高 性 能 的 SVG 替代 方案 的 内 容 。CSS3 渐变 是 用 来 替代 目前 的 CSS 
重复 背景 图 片 的 绝 佳 选择 ， 它 同样 易于 编辑 并 且 具 有 良好 的 可 复 用 性 。 使 
用 CSS3 替换 图 片 可 能 会 让 网 站 有 非常 明显 的 速度 提升 。 同 样 ， 使 用 SVG 
替换 图 片 也 可 以 提升 页 面 加 载 速度 ， 因 为 SVG 可 以 同时 替换 样式 表 中 的 普 
通 清晰 度 图 片 和 给 视网膜 屏 定制 的 高 清晰 度 图 片 。 
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确保 新 添加 到 样式 表 中 的 图 标 或 图 片 在 网 站 的 设计 中 都 具有 明确 的 含义 和 
用 途 。 将 其 文档 化 ， 制 作成 样式 指南 ， 这 样 其 他 的 开发 者 和 设计 师 就 可 以 
知道 目前 已 经 使 用 了 哪些 图 标 ， 以 及 如 何 使 用 它们 。 通 常情 况 下 ， 由 于 不 
清楚 哪些 图 片 已 经 存在 于 站 点 内 ， 样 式 表 中 的 图 片 数 量 会 不 知 不 觉 由 于 重 
复 而 变 得 很 多 。 我 见 过 很 多 网 站 ， 开 发 了 数 种 用 图 标 或 突出 等 途径 来 指示 
提示 或 警告 信息 的 方式 ， 而 不 是 使 用 统一 的 样式 规范 。 当 你 审查 样式 表 以 
寻找 使 用 设计 模式 的 时 机 时 ， 考 虑 一 下 样式 表 中 使 用 的 图 片 数 量 ， 以 及 是 
否 可 以 对 它们 进行 精简 。 


4.2.4 去 除 特殊 性 

在 CSS 中 ， 特 殊 性 (specificity) 用 来 箭 选 选择 器 ， 帮 浏览 器 决定 应 用 哪 项 
CSS 规则 。 选 择 器 有 很 多 种 ， 每 一 种 都 有 自己 的 权重 ， 基 于 这 些 选 择 器 ， 
通过 一 套 计 算 规 则 (https://stuffandnonsense.co.uk/archives/css_specificity_ 
wars.html) 得 出 特殊 性 。 如 果 两 个 选择 器 应 用 于 同一 个 元 素 上 ， 那 么 特殊 
性 值 高 的 最 终 获 得 优先 级 。 

你 会 经 常 在 一 个 CSS 文件 中 看 到 过 于 具体 的 选择 器 。 这 经 常 发 生 于 设计 者 
或 开发 者 试图 通过 增加 权重 来 覆盖 之 前 定义 的 应 用 于 特定 选择 器 的 样式 。 
例如 : 









































div#header #main ul li a.toggle { ... } 


为 什么 这 个 样式 表 的 作者 选择 将 所 有 选择 器 添加 到 一 行 呢 ?” 为 什么 不 能 简 
单 地 展示 为 : 


.toggle { ... } 


有 可 能 作者 为 了 正确 地 设置 样式 真 的 需要 所 有 的 特殊 性 。 但 是 ， 这 么 多 的 
特殊 性 也 表明 ， 使 用 样式 表 或 者 HTML 层次 结构 可 能 会 更 高 效 。CSS 重新 
定义 之 前 过 度 具 体 的 CSS 时 ， 往 往 会 发 生 低 效 的 选择 器 ， 这 也 是 件 好 事 ， 
便于 你 观察 并 找到 需要 精简 的 地 方 ， 从 而 提升 效率 。 这 在 大 型 企业 中 经 常 
发 生 ， 因 为 同一 段 代 码 会 被 多 人 编辑 。 








低 效 的 使 用 选择 器 在 过 去 被 认为 一 定 不 利于 性 能 ， 但 是 鉴于 现代 浏览 器 的 
高 性 能 ， 这 一 担心 变 少 了 。 不 管 怎样 ， 清 理 选择 器 仍然 是 明智 的 ， 因 为 它 
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可 以 帮 你 维护 前 端 架构 。 


CSS 效率 越 高 ， 性 能 就 会 越 好 。 减 少 特殊 性 意味 着 ， 通 过 CSS 本身 的 
层级 关系 来 重新 定义 样式 会 更 简单 ， 而 不 是 通过 添加 额外 的 权重 或 者 
Sono 规则 。 低 效 的 选择 器 和 !tmportant 规则 通常 会 让 CSS 文件 变 得 
宛 余 。 总 是 尽 可 能 地 从 最 小 、 最 轻 的 选择 器 开始 ， 添 加 特殊 性 。 


、 mn 
4.3 ”优化 网 络 字 体 
网 络 字 体会 让 页 面 的 请 求 数量 增加 ， 体 积 增 大 。 字 体 是 能 够 提升 页 面 美感 
却 会 让 加 载 速 度 下 降 的 典型 例子 。 需 要 注意 让 字体 尽 可 能 地 高 效 ， 庶 慎 地 
加 载 字 体 资 源 ， 同 时 测量 性 能 和 转化 率 等 相关 指标 ， 以 确保 将 字体 包含 在 
页 面 中 所 付出 的 代价 是 值得 的 。 


下 面 展 示 了 如 何 加 载 网 络 字 体 : 








@font-face { 

font-family: 'FontName'; 
/* IE9 兼 容 性 模式 */ 

src: url('fontname.eot'); 
/* IE6-IE8 */ 

src: url('fontname.eot?#iefix') format('embedded-opentype'), 
/* 现代 浏览 器 */ 
UrL(' tet woff') format('woff ' ) ， 
/* Safarit,Androtd,tLOS */ 
url('fontname.ttf') format('truetype'); 


} 





支持 Web Open Font Format (WOFF，http://caniuse.com/#feat=woff) 的 浏览 

器 越 来 越 多 ， 因 此 根据 你 的 目标 用 户 群 和 浏览 器 支持 情况 ， 可 以 选择 更 简 
短 的 @font-face 声明 。 比 如 下 面 这 个 例子 ， 支 持 Chrome 6+、Firefox 3.6+、 
IE 9+ 和 Safari 5.1+: 








@font-face { 
font-family: 'FontName'; 
src: url('fontname.woff') format('woff'); 


} 
之 后 ， 可 以 通过 font-family 来 应 用 字体 ， 并 且 定 义 备 选 字体 ， 来 应 对 新 的 
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字体 文件 无 法 加 载 的 情况 : 


body { 
font-family: 'FontName', Fallback, sans-serif; 
} 
为 什么 需要 备 选 字体 ? 


访问 网 站 的 用 户 中 有 一 小 部 分 人 的 浏览 器 不 支持 网 络 字体 ， 或 禁用 了 网 络 
字体 加 载 。 也 有 可 能 字体 文件 已 经 损坏 或 者 浏览 器 找 不 到 字体 文件 。 如 果 
用 户 的 浏览 器 无 法 找到 font-family 字体 列表 中 的 第 一 个 字体 ， 就 会 尝试 
第 二 个 ， 依 次 类 推 。 备 选 字 体 列 表 应 该 至 少 有 一 个 同 主要 字体 相近 的 字体 ， 
至 少 有 一 个 全 平台 支持 的 字体 (比如 Georgia 或 Arial) ， 以 及 一 个 通用 字 
体 ， 比 如 sans-serif 或 serif。 


网 络 字体 的 文件 有 很 多 种 大 小 ， 从 几 KB 到 200 KB 不 等 。 检 查 你 所 使 用 的 
网 络 字体 文件 ， 从 以 下 几 方 面 入 手 尝试 减少 它们 的 大 小 。 


。 你 是 否 只 需要 几 个 字符 而 非 整 个 字母 表 和 表单 符号 ? 比如 你 只 在 标志 中 
使 用 这 个 字体 ? 

。 字体 是 否 支 持 多 语言 ? 是 否 可 以 减少 支持 的 语言 种 类 为 其 中 的 一 个 子 集 
(比如 拉丁 子 集 ) ? 

。 能 去 除 任何 非 必需 的 字符 吗 ? 
































字符 子 集 是 可 以 有 效 减 小 字体 文件 的 工具 。 如 果 你 正在 使 用 Google 这 样 的 
字体 服务 ， 可 以 选择 只 加 载 特定 的 字符 子 集 。 在 下 面 的 例子 中 ， 我 们 会 加 
载 Google 的 Philosopher 字体 的 Cyrillic 子 集 : 








<Link href="http://fonts.googleapis.com/css?family=Philosopher 
&subset=cyrillic" rel="stylesheet" /> 


同样 也 可 以 只 加 载 特 定 字符 。 例 如 ， 我 们 可 以 加 载 Philosopher 字体 的 字母 
H、o、w、d 和 y: 


<Link href="http://fonts.googleapis.com/css?family=Philosopher 
&text=Howdy" rel="stylesheet" /> 


诸如 Google 等 外 部 的 字体 服务 很 可 能 已 经 缓存 了 用 户 所 需要 的 字体 ， 如 果 
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没有 缓存 就 会 请 求 外 部 域名 并 加 载 。 自 己 托管 的 字体 可 以 节省 这 个 额外 的 
DNS 查询 ， 但 用 户 第 一 次 访问 是 不 会 有 缓存 的 。 


自己 托管 字体 的 另外 一 个 好 处 是 可 以 对 字体 文件 进行 自 定义 。 通 过 Font 
Squirrel’s Webfont Generator (http:/www.fontsquirrel.com/tools/webfont- 
generator) 这 样 的 工具 ， 可 以 自 定义 一 个 子 集 来 对 字体 文件 进行 优化 ， 如 图 
4-3 所 示 。 








Subsetting: OBasic Subsetting custom Subsetting... ONo Subsetting 

Character Encoding: DMacRoman 

Character Type: DLowercase 口 Currency DLower Accents 
DUppercase DTypographics DUpper Accents 
口 Numbers 站 Math Symbols DDiacriticals 
DPunctuation DAtPunctuation 

Language: DDAlbanian DFaroese 门 Maltese 

LjBosnian [LjFrench LNorwegian 
品 Catalan 口 German OPolish 
DCroatian 口 Greek 口 Portuguese 
口 cyrillic 口 Hebrew DRomanian 
DCech DHungarian 站 Serbian 
DDanish DlIcelandic DSlovak 
DDutch DItalian LSlovenian 
DEnglish 口 Latvian 加 Spanish 
DEsperanto DDLithuanian DSwedish 
癌 Estonian 口 Malagasy OTurkish 

Unicode Tables: 加 Basic Latin DPunctuation DLatin Extended-B 
DDLatinlSup DDLatin Extended-A DLatin Extended+ 
DCurrency Symbols 

Single Characters: ] 

Unicode Ranges: 

Subset Preview: 




















图 4-3: Font Squirrel'*s Webfont Generator 允许 你 自 定义 一 个 字体 文件 的 子 
集 ， 在 这 个 例子 中 ， 我 们 的 子 集 由 基础 拉 J Unicode 表 和 额外 的 四 
个 字符 组 成 
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你 也 许 会 想 要 同时 使 用 多 个 字 重 。 谨 慎 选 择 使 用 的 自重 数量 ， 因 为 字 重 越 
多 ， 请 求 数 量 和 页 面体 积 就 越 大 ， 这 对 页 面 性 能 的 负面 影响 非常 大 。 尽 量 
少 使 用 不 同 的 字 重 ， 平 衡 字 体 的 视觉 美观 和 性 能 (第 7 章 有 更 多 关于 平衡 
和 测量 的 内 容 )。 

另 一 种 优化 网 络 字体 加 载 技术 的 方式 是 ， 只 在 大 屏幕 中 加 载 字体 。 这 样 
可 以 在 智能 手机 等 小 尺寸 设备 中 减少 请 求 数量 和 页 面体 积 ， 让 性 能 更 好 
(1.2.1 节 中 有 相关 原因 的 说 明 )。 使 用 媒体 查询 来 应 用 网 络 字体 : 











@media (min-width: 1000px) { 
body { 
font-family: 'FontName', Fallback, sans-serif; 
} 
} 


使 用 网 络 字体 时 最 重要 的 一 点 是 谨慎 使 用 。 将 字 重 的 使 用 场景 文档 化 ， 这 
样 其 他 人 就 可 以 复 用 标签 并 在 合适 的 地 方 使 用 字 重 。 特 定 的 字 重 应 该 只 在 
特定 的 头 部 元 素 或 设计 模式 中 使 用 。 这 样 可 以 帮助 培训 网 站 的 其 他 设计 师 
和 开发 者 ， 同 时 也 可 以 让 网 站 的 加 载 速度 尽 可 能 快 。 在 4.4.1 市 中 阅读 更 多 
相关 内 容 。 














4.4 创建 可 复 用 的 HTML 标 记 


随 着 网 站 设计 的 不 断 改 进 ， 使 用 可 复 用 的 HTML 标记 创建 设计 模式 成 为 维 
护 网 站 性 能 的 关键 。 在 决定 网 站 层级 关系 、 布 局 和 传达 给 用 户 的 感觉 的 同 
时 ， 你 有 机 会 仔细 考虑 资源 的 加 载 ， 并 创建 可 以 在 整个 网 站 范围 内 复 用 的 
HTML 标记。 良好 的 设计 模式 可 以 同时 节省 开发 时 间 和 页 面 的 加 载 时 间 。 
可 复 用 的 HTML 标记 能 够 带 来 以 下 好 处 : 


。 为 资源 缓存 提供 便利 

。 防止 设计 师 和 开发 者 白费 力气 做 重复 的 工作 
。 在 加 载 新 内 容 时 无 需 加 载 非 必 要 的 资源 

。 帮助 你 删除 那些 已 经 不 再 需要 的 样式 和 资源 


通过 规范 化 网 站 的 颜色 使 用 ， 将 加 载 指示 和 精灵 图 等 可 复 用 的 模式 整理 成 
文档 ， 以 及 定义 使 用 字体 等 资源 的 规则 ， 可 以 让 困 队 成 员 在 网 站 的 改进 中 
























































优化 HTML 标 记 和 样式 | 77 


做 出 对 加 载 时 性 能 最 合适 的 决策 。 


以 颜色 标准 化 为 例 。 检 查 你 网 站 的 CSS 文件 并 找到 所 有 用 到 的 颜色 值 。 使 
用 了 多 少 种 不 同 深度 的 灰色 ? 当 在 界面 中 显示 提醒 时 ， 是 否 使 用 了 统一 的 
颜色 集合 ?是否 存在 多 种 不 同 深度 的 红色 或 黄色 ? 主 站 的 颜色 使 用 情况 如 
何 ? 是 否 整 个 网 站 都 使 用 同一 个 HEX 值 的 主 色调 ?还 是 使 用 了 不 同 明度 和 
饱和 度 的 相近 颜色 ? 


设计 中 使 用 的 颜色 越 多 ,颜色 的 意义 就 越 不 明确 ， 而 且 样 式 表 也 会 愈加 难 
以 维护 。 把 它们 整理 在 一 起 ， 然 后 看 看 如 何 进 行 简化 。 在 简化 的 同时 ， 思 
考 如 何 使 用 这 些 颜 色 。 例 如 ，A List Apart 样式 库 包含 了 颜色 使 用 场景 的 相 
关 说 明 ( 见 图 4-4)。 


























A Pattern Apart 


A List Apart's pattern library 


Swatches 


Text: #222 Link: #2455c3 Accent: #bb3825 


图 4-4: A List Apart 样式 库 (http://patterns.alistapart.com/) 包含 了 颜色 使 
用 场景 的 相关 说 明 

当 开 发 一 个 使 用 了 很 多 金黄 色 和 深 灰 色 的 网 站 时 ， 我 对 样式 表 进 行 了 清理 ， 

使 站 点 所 使 用 的 颜色 尽量 统一 。 我 建立 了 一 个 文档 ， 记 录 了 当 设 计 师 想 要 

深 黄色 、 浅 黄色 以 及 红色 的 警告 信息 和 绿色 的 “变更 成 功 ” 信 息 时 应 该 使 
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用 哪些 颜色 代码 ， 等 等 。 同 时 我 整理 了 所 有 灰色 的 用 例 ， 搞 清楚 何 时 以 及 
如 何 使 用 它们 〈 例 如， 禁用 状态 的 文字 和 边框 使 用 #aaa， 背 景 使 用 #eee 
等 )。 当 记录 完 颜 色 及 它们 的 相关 含义 后 ， 我 用 新 的 标准 色 替 换 了 旧 有 的 颜 
色 。 这 使 得 我 可 以 合并 及 精简 很 多 样式 ， 因 为 之 前 完全 没有 复 用 性 可 言 。 
这 样 一 来 ， 样 式 文件 体积 减 小 了 6%， 不 仅 降 低 了 未 来 的 开发 和 维护 成 本 ， 
同时 也 提升 了 加 载 速 度 。 


样式 指南 

创建 可 复 用 的 设计 模式 是 非常 好 的 实践 ， 而 决定 能 否 持续 复 用 它们 的 关键 
是 文档 化 。 样 式 指 南 对 团队 中 的 很 多 角色 来 讲 都 是 非常 棒 的 资源 ， 编辑、 
开发 者 、 设 计 师 及 其 他 想 要 获取 关于 网 站 设计 和 开发 的 最 佳 实践 的 人 。 


样式 指南 展示 了 编码 及 获取 资源 的 最 佳 方式 ， 可 以 让 其 他 在 你 的 网 站 上 工 
作 的 人 也 帮助 提升 网 站 性 能 。 将 网 站 的 标志 资源 放 到 一 处 ， 并 尽 可 能 地 优 
化 文件 体积 ， 选 择 最 合适 的 文件 格式 ， 可 以 帮助 未 来 新 实现 的 标志 同样 遵 
循 最 佳 实践 。 将 网 站 标准 的 、 优 化 的 加 载 指示 器 记录 下 来 ， 以 方便 以 后 的 
设计 师 直 接 复 用 这 些 模式 ， 免 得 重新 发 明 一 个 又 慢 又 笨重 的 效果 。 现 阶段 
投入 精力 制定 样式 指南 ， 将 帮助 网 站 在 未 来 保持 良好 的 性 能 。 


制定 样式 指南 时 将 以 下 内 容 考 虑 进去 : 


。 HEX 值 ， 以 及 何 时 使 用 它们 

。 按钮 的 类 名 ， 以 及 如 何 使 用 它们 

。 精灵 图 ， 以 及 使 用 其 中 图 标的 对 应 类 名 

。 字体 ， 包 括 如 何 给 标题 元 素 设 置 样 式 ， 以 及 如 何 引 用 网 络 字 体 


当 记 录 最 佳 实践 时 ， 需 要 给 出 如 何 实现 这 些 样式 的 相关 说 明 。 添 加 HTML 
和 CSS 标签 的 示例 ， 说 明 如 何 引 用 正确 的 JavaScript 文件 ， 或 者 任何 可 
以 提升 效率 的 实现 方法 。 例 如 ，Yelp 的 样式 指南 (http://www.yelp.com/ 
styleguide) 中 有 一 个 章节 包含 了 按钮 的 用 例 ， 展 示 了 如 何 正 确 使 用 主要 、 
次 要 和 第 三 重要 的 按钮 ， 同 时 还 有 已 经 不 推荐 使 用 的 过 期 按钮 样式 (图 
4-5)。 
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Buttons 


Basic buttons 


.ytype buttons should be Used on all pages with Updated typography. 


large 


secondary 


tertiary 


$h.ybutton_attributes($eLement，$type，$size，$content，$cLassname='ytype') 


DEPRECATED buttons 


Show pattern 





图 4-5: Yelp 的 样式 指南 中 有 一 个 章节 包含 了 按钮 的 用 例 ， 展 示 了 如 何 正 确 
使 用 主要 、 次 要 和 第 三 重要 的 按钮 ， 同 时 还 有 已 经 不 推荐 使 用 的 过 期 


按钮 样式 


标签 应 该 方便 复制 和 粘贴 ， 这 样 未 来 的 设计 师 和 开发 者 可 以 更 容易 地 实 
现 相 关 设 计 。 例 如 Starbucks 的 样式 指南 (http://www.starbucks.com/static/ 
refer-ence/styleguide/) 中 包含 了 如 何 使 用 公司 的 图 标 字 体 的 说 明 ，HTML 和 


CSS 的 示例 ， 以 及 每 个 图 标的 例子 ( 








源 的 说 明 ， 应 该 尽 可 能 简单 和 直观 。 








图 4-6)。 样 式 指南 中 可 复 用 模式 及 资 











Video Player Icons 

















图 4-6: Starbucks 样式 指南 (http://www.starbucks.com/static/reference/ 
styleguide/) 包含 了 如 何 使 用 公司 的 图 标 字 体 的 说 明 ，HTML 和 


CSS 的 示例 ， 以 及 每 个 图 标的 例子 











易于 理解 的 用 例 、 方 便 复制 和 粘贴 的 标签 以 及 美观 的 例子 ， 可 以 方便 人 在 
网 站 上 实现 这 些 样式 。 保 持 文档 直观 的 同时 也 要 尽量 详实 。 例 如 ， 以 网 络 
字体 的 用 例 为 例 ， 需 要 列举 出 可 能 使 用 的 字 重 ， 如 何 高 效 地 实施 ， 以 及 它 











们 的 使 用 场景 ， 如 我 们 在 Etsy 的 样式 指南 中 所 做 的 一 样 上 








图 4.7)。 
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Typography 
There are two main types of Guardian fonts available for use: those for display, and those for text. The Guardian display and text weights can be applied to 
any element type ( hl ，p, etc.). Please be judicious when including font files; some browsers download all @font-face files referenced in a CSS file, 


regardless of whether or not the font is actually applied to an element on the page. Only @import the font weight/style necessary to your design. 


Guardian 


Appearance Marku 
Weight eh 日 
Display weights should be used for title and promo copy at sizes no less than 18px. 
@import "/fonts/guardian-egyptt-light.css"; 
Display EF :your-element { 
Light Toremipsumsitamet font-family: "Guardian-EgypT1", Georgia, serif; 
font-weight: 300; 
了 
@import "/fonts/guardian-egyptt-regular.css"; 
Display . “your-element { 
Regular Loremipsum sitamet font-family: "Guardian-EgypTT", Georgia, serif; 


font-weight: 400; 








图 4-7: Etsy 样式 指南 中 包含 了 @font-face 的 字号 ， 何 时 使 用 多 种 字体 的 说 


明 ， 以 及 可 以 直接 粘贴 使 用 的 CSS 代码 


可 复 用 的 模式 不 仅 可 以 节约 页 面 加 载 时 间 ， 也 可 以 提高 设计 和 开发 的 效率 。 
当 网 站 的 设计 在 未 来 发 生变 化 时 ， 很 容易 对 特定 样式 的 所 有 实例 进行 统一 
更 新 ， 因 为 它们 共享 相同 的 资源 和 样式 。 可 复 用 的 样式 越 多 ， 样 式 及 相关 
资源 被 缓存 的 机 会 就 越 大 ， 样 式 表 就 会 越 小 ， 网 站 的 加 载 速度 也 就 会 越 快 。 


4.5 关于 HTML 标 记 的 进一步 思考 


在 HTML 标记 和 样式 都 整理 完成 后 ， 还 可 以 做 一 些 其 他 的 优化 来 改善 页 























i 加 载 速度 ， 比 如 资源 的 加 载 顺 序 、 压 缩 和 缓存 等 。 有 意 安排 资源 的 加 载 





有 











抽 序 并 了 解 它 们 是 如 何 传输 到 浏览 器 的 ， 可 以 帮助 你 改善 网 站 的 整体 用 户 


体验 。 


4.5.1 CSS 和 JavaScript 加 载 
关于 CSS 和 JavaScript 加 载 有 两 条 主要 的 规则 : 


在 <head> 中 加 载 CSS 
在 页 面 的 最 后 加 载 JavaScript 
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在 2.3.1 节 中 ， 我 们 已 经 了 解 了 和 关键 谊 染 路 径 相 关 的 内 容 ， 知 道 CSS 会 
阻塞 浑 当 。 如 果 在 页 面 底部 含有 样式 表 ， 会 阻止 浏览 器 尽快 显示 内 容 。 如 
果 样 式 发 生变 化 ， 浏 览 器 会 尽量 避免 重新 绘制 页 面 元 素 ， 将 样式 表 放 在 
<head> 中 会 让 内 容 逐 渐 展 示 出 来 ， 因 为 浏览 器 已 经 拥有 了 演 染 内 容 所 需 的 
全 部 样式 信息 ， 不 需要 进一步 的 查找 。 


尽 可 能 地 精简 样式 表 文件 的 数量 有 助 于 减少 网 站 发 送 的 请 求 总 数 ， 会 导致 
页 面 加 载 速度 大 幅 加 快 。 这 意味 着 你 需要 尽量 避免 使 用 @import， 因 为 这 会 
显著 增加 页 面 加 载 时 间 。CSS 文件 越 小 越 好 ， 我 建议 无 论 在 何 处 都 用 一 个 
不 超过 30 KB 其 至 更 小 的 样式 表 文 件 。 对 于 大 型 网 站 来 说 ， 最 好 有 一 个 文 
件 包含 全 站 通用 的 样式 ， 然 后 再 根据 需要 定义 页 面 级 别 的 专 有 样式 。 这 样 
一 来 ， 全 站 通用 的 样式 文件 可 以 被 缓存 ， 用 户 只 需要 为 每 个 页 面 下 载 一 个 
很 小 的 额外 样式 文件 。 

































































JavaScript 文件 应 该 放 在 页 面 底部 ， 并 尽 可 能 进行 异步 加 载 。 这 样 页 面 的 其 
他 内 容 可 以 更 快 地 展示 给 用 户 ， 因 为 JavaScript 会 阻塞 DOM 构建 ， 除 非 被 
明确 声明 为 异步 加 载 。 


当 浏 览 器 的 HTML 解析 器 遇 到 script 标签 时 ， 它 知道 脚本 内 容 可 能 会 修改 
页 面 的 浑 染 树 ， 因 此 广 览 器 会 暂停 DOM 构建 ， 让 脚本 先 完成 它 的 工作 。 当 
脚本 运行 完成 后 ， 浏 览 器 会 从 之 前 HTML 解析 器 暂停 的 地 方 开始 继续 构建 
DOM。 将 脚本 调用 移 到 页 面 底 部 ， 并 将 它们 异步 化 ， 来 优化 关键 渲染 路 径 
并 消除 阻塞 演 染 的 问题 ， 这 样 可 以 帮助 提升 页 面 的 感知 性 能 。 












































如 果 你 没有 将 脚本 写 在 HTML 页 面 的 行内 ， 而 是 引用 了 一 个 外 部 JavaScript 
文件 ， 浏 览 器 就 需要 向 你 的 服务 器 《如果 你 请 求 的 是 另 一 个 网 站 的 文件 ， 
那 就 是 一 个 第 三 方 服务 器 ) 请 求 这 个 文件 。 这 个 请 求 可 能 会 花费 数 千 毫秒 
的 时 间 ， 而 HTML 解析 器 在 继续 谊 染 DOM 之 前 会 一 直 被 阻塞 。 但 是 可 以 
通过 来 给 脚本 添加 async 标记 来 告诉 浏览 器 这 个 脚本 不 需要 被 立即 执行 ， 
这 样 就 不 会 阻塞 内 容 渲染 了 : 




















<script src="main.js" async></script> 





这 样 浏览 器 会 继续 构建 DOM， 在 脚本 加 载 完 成 并 准备 好 后 再 执行 它 。 
对 于 异步 脚本 有 一 些小 技巧 可 以 遵循 。 在 实现 加 载 新 内 容 的 异步 脚本 时 ， 
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需要 注意 对 用 户 体验 的 影响 。 任 何 延迟 加 载 的 内 容 都 会 让 页 面 的 布局 发 生 
变化 ， 引 起 内 容 的 位 置 变化 ， 让 用 户 感到 意外 ， 可 以 在 页 面 中 放置 占 位 内 
容 来 保持 结构 的 稳定 ， 使 之 不 随 加 载 而 发 生变 化 。 


注意 ， 异 步 脚 本 的 加 载 顺序 是 不 国定 的 ， 可 能 会 导致 依赖 出 错 。 根 据 内 容 
不 同 ， 你 也 可 以 在 异步 加 载 内 容 时 显示 一 个 加 载 指示 器 ， 使 用 户 了 解 还 有 
内 容 设 有 被 加 载 。 还 要 注意 的 是 ， 异 步 加 载 的 内 容 可 能 无 法 与 书签 、 后 退 
按钮 及 搜索 引擎 等 技术 很 好 地 协同 工作 ， 当 优化 关键 泻 染 路 径 和 用 户 体验 
时 ， 需 要 牢记 这 一 点 。 


诸如 广告 、 社 交 分 享 按钮 和 其 他 小 组 件 等 第 三 方 内 容 可 能 会 对 网 站 的 性 能 
产生 影响 。 这 些 内 容 都 应 该 异步 加 载 ， 并 且 要 确保 这 些 外 部 资源 不 会 发 生 
单 点 故障 。 第 三 方 脚本 不 仅 会 增加 页 面体 积 ， 同 时 由 于 它们 保存 在 另外 一 
个 网 站 ， 需 要 进行 额外 的 DNS 查询 和 连接 ， 因 而 会 带 来 性 能 问题 。 同 时 ， 
你 无 法 控制 第 三 方 资源 的 缓存 。 


尽量 不 要 使 用 第 三 方 脚本 。 请 求 的 数量 越 少 ， 页 面 的 性 能 就 会 越 好 。 试 
着 合并 和 精简 和 脚本， 可 以 通过 复制 、 优 化 然后 在 自己 的 网 站 上 保存 第 三 
方 脚 本 来 实现 。 尽 量 使 用 简单 的 链接 替代 社交 分 享 的 脚本 。 定 期 评估 在 
页 面 上 引入 第 三 方 资源 的 价值 : 它 对 性 能 的 影响 是 否 超过 了 它 提供 给 用 
户 的 价值 ? 

































































对 于 脚本 性 能 ， 通 过 观察 瀑布 图 来 确保 JavaScript 文件 在 其 他 内 容 之 后 
加 载 ， 并 且 设 有 阻塞 其 他 的 下 载 或 者 重要 内 容 的 浑 染 。 用 来 加 载 广告 、 闻 
oo er 
泻 染 。 


4.5.2 ”压缩 和 gzip 

看 见 样式 表 文 件 中 的 空格 、 不 必要 的 分 号 和 数字 前 的 零 了 吗 ? 还 有 
JavaScript 文件 中 那些 不 必要 的 空格 、 空 行 和 缩 进 ? 是 时 候 对 这 些 资 源 进行 
压缩 了 ， 在 代码 展示 给 终端 用 户 之 前 将 这 些 非 必需 的 字符 移 除 。 压 缩 可 以 
减 小 文件 体积 ， 这 对 提升 网 站 性 能 大 有 好 处 。 


可 以 使 用 命令 行 工具 来 压缩 代码 ， 也 可 以 使 用 在 线 工具 ， 如 CSSMinifier. 
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com (http://cssminifier.com) 和 JSCompress.com (http:Wjscompress.comy/) 。 





图 


4-8 中 展示 了 将 我 自己 的 网 站 的 CSS 文件 复制 到 CSSMinifier.com 的 工具 中 
后 ， 经 过 压缩 、 优 化 和 缩减 后 的 输出 结果 。 输 出 结果 比 原 始 结果 的 体积 缩 
小 了 15%。 





Input CSS 


Minified Output 





html,body,div,span,h1,h2,h3,p,a,em,img,strong,article,section,heac 


@font-face { 

font-family: "FranklinGothicFSBook’; 

src: url('/fonts/franklin_gothic_book-webfont-webfont.eot’); 

src: url(/fonts/franklin_gothic_book-webfont-webfont.eot?#iefix') 
uri('/fonts/franklin_gothic_book-webfont-webfont.woff) forma 
url('/fonts/franklin_gothic_book-webfont-webfont.tf) format(t 

font-weight: normal; 

font-style: normal; 


a,article,body,dd,div,dl,dt,em,footer,h1,h2,h3,header,html,img,p, 
section,span,strong{margin:0;padding:0;border:0;outline:0;font- 
Ssize:100%;vertical-align:baseline;background:0 0}@font- 
face{font- 
family:FranklinGothicFSBook;src:url(/fonts/franklin gothie..book- 
wabfont-webfont.agt);sre:url/fonts/franklin_ gothie.. book: 
weabfont-webfont.eot?#iefix) format(embedded- 
opentype’),url(/fonts/franklin .gothie. hook-webfont- 
webfont.woff) format( woff’),url/fonts/franklin .gothie. book: 
webfont-webfont,tt) formatf'truetype );font-weight400;font- 


} style:normal}@font-face{font-family:Bree;src:url(/fonts/breeserif- 
@font-face { regular-webfont.eot);src:url/fonts/preeserif-reqular 

font-family: "Bree'; webfont.aot?#iefix) format(‘embedded- 

src: url('/fonts/breeserif-regular-webfont.eot’); opentype'),url(/fonts/breeserif-regqular-webfont.wof) 

rn: nlf fante /hranearit-ren lar-wahfnnt ent24iafiv fnrmot om formatf wotf),urlUfonts/breeserifregular-webtontttf 





i DownloadasFle RAW Clear Select All 











图 4-8: 在 这 个 例子 中 ， 展 示 了 将 我 自己 网 站 的 CSS 文件 输入 到 CSSMinifier.com 
的 工具 中 后 ， 经 过 压缩 、 优 化 和 缩减 后 的 输出 结 


你 会 发 现 ， 在 检查 某 个 网 站 压缩 后 的 CSS 时 ， 很 难 在 文件 中 定位 到 某 个 特 
定 样式 ， 因 为 压缩 后 的 文件 所 有 内 容 都 在 同一 行 中 。 确 保 保存 了 原始 未 经 
压缩 的 版 本 ， 因 为 当 未 来 需要 修改 时 ， 它 比 压缩 后 的 版 本 更 易 阅 读 和 修改 。 
在 网 站 上 只 使 用 压缩 过 后 的 版 本 ， 这 样 用 户 会 下 载 到 尽 可 能 小 的 文件 。 











另 一 个 压缩 这 些 文本 文件 的 方法 是 使 用 gzip。gzip 是 一 个 以 特定 算法 来 压 
缩 文件 的 软件 。gzip 的 算法 会 查找 文本 文件 中 相似 的 字符 串 并 替换 它们 ， 
使 文件 整体 体积 缩小 。 浏 览 器 知道 如 何 解码 这 些 被 奉 换 的 字符 串 ， 并 将 内 
容 正 确 地 显示 给 用 户 。 





需要 在 服务 器 上 开启 gzip 以 启用 压缩 。 如 何 开启 取决 于 你 的 服务 器 类 型 。 


。 Apache: 使 用 mod_deflate (http://httpd.apache.org/docs/current/mod/mod_ 
deflate.html ) 。 

。 NGINX: 使 用 ngx_http_gzip_module (http://nginx.org/en/docs/http/ngx_http_ 
gzip_module.html) 。 

。 IIS: 配置 HTTP 压缩 (https://technet.microsoft.com/en-us/library/cc771003 
(v=WS.10).aspx) 
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gzip 对 于 样式 表 、HTML、JavaScript 和 字体 等 文本 文件 是 非常 有 用 的 。 唯 
一 的 例外 是 WOFF 格式 的 字体 文件 ， 因 为 它 已 经 内 建 了 压缩 。 























4.5.3 资源 缓存 

缓存 对 网 站 性 能 至 关 重要 ， 被 缓存 的 资源 不 需要 再 次 向 服务 器 请 求 ， 可 以 
节省 一 次 请 求 。 缓 存 通过 同 用 户 浏 览 器 共享 缓存 信息 ， 来 决定 是 直接 从 硬 
盘 中 显示 之 前 下 载 过 的 文件 (缓存 )， 还 是 再 次 从 服务 器 请 求 。 








缓存 信息 是 通过 HTTP 头 来 传达 的 ，HTTP 头 是 在 浏览 器 和 服务 器 之 间 来 
回 的 请 求 的 核心 部 分 。HTTP 头 中 包含 了 很 多 额外 的 信息 ， 诸 如 浏览 器 的 
UA、Cookie 信息 、 编 码 类 型 和 内 容 的 语言 等 。 响 应 头 中 包含 的 缓存 参数 有 
以 下 两 种 类 型 。 


。 设置 一 个 时 间 长 度 ， 浏 览 器 在 该 时 间 内 无 需 向 服务 器 请 求 更 新 的 版 本 ， 
而 直接 使 用 缓存 的 资源 (Expries 和 Cache-ControL: max-age)。 

。 设置 资源 的 版 本 信息 ， 浏 览 器 可 以 用 来 同 服务 器 上 的 版 本 信息 进行 对 比 
(Last-Modified 和 ETag)。 











你 可 以 为 所 有 可 以 缓存 的 资源 设置 Expries 和 Cache-Control: max-age 其 
中 的 一 个 (不 是 同时 设置 二 者 )， 以 及 Last-Modified 和 ETag 其 中 的 一 个 
(不 是 同时 设置 二 者 )。Expries 的 支持 性 比 Cache-Control: max-age 更 好 。 
Last-Modified 是 一 个 日 期 而 ETag 可 以 是 任意 用 来 标识 资源 版 本 的 唯一 
的 值 ， 比 如 文件 的 版 本 号 。 


所 有 静态 资源 (CSS 文件 、JavaScript 文件 、 图 片 、PDF、 字 体 等 ) 都 应 该 
被 缓存 。 


。 当 使 用 Expries 时 ， 将 过 期 时 间 设 置 为 一 年 以 内 。 不 要 将 过 期 时 间 设 置 
为 超过 一 年 ， 这 样 会 违反 RFC 的 指南 。 
。 将 Last-Modified 设置 为 文件 最 后 一 次 修改 的 日 期 。 




















如 果 你 刚好 知道 某 个 文件 马上 就 会 进行 修改 ， 也 可 以 将 过 期 时 间 设 置 得 短 
一 点 。 即 便 这 样 ， 将 过 期 时 间 的 最 短 值 设 置 为 一 个 月 仍然 是 一 个 最 佳 实践 。 
或 者 你 也 可 以 改变 资源 的 URL 参考 ， 这 样 就 可 以 破坏 掉 缓 存 机 制 ， 强 制 浏 
览 器 获取 最 新 的 版 本 。 
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关于 如 何在 Apache 服务 器 上 开启 缓存 相关 的 功能 ， 可 以 阅读 Apache 组 
存 指 南 (http://httpd.apache.org/docs/2.2/caching.html)。 对 于 NGINX 服务 
器 ， 可 以 阅读 NGINX 内 容 缓 存 (http://nginx.com/resources/admin-guide/ 
caching/) 。 


为 了 给 用 户 提供 章 越 、 快 速 的 用 户 体验 ， 在 优化 网 站 资源 时 有 很 多 有 效 的 
手段 可 以 利用 ， 包 括 加 载 顺序 、 压 缩 和 缓存 等 。 在 为 网 络 连接 状况 更 差 的 
移动 用 户 进行 优化 时 ， 这 些 技术 会 显得 您 发 重要 ， 特 别 是 当 你 想 要 为 不 同 
屏幕 尺寸 的 用 户 显示 不 同 内 容 时 。 在 下 一 章 ， 我 们 将 讨论 如 何 针对 小 屏幕 
设备 的 内 容 进行 优化 ， 为 移动 用 户 创 建 高 性 能 、 优 秀 的 用 户 体验 。 
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第 5 章 


响应 式 Web 设 计 





移动 互联 网 不 再 是 “遥远 的 未 来 ”。 正 如 第 1 章 提 到 的 ， 全 球 有 相当 多 的 用 
户 将 手机 作为 上 网 的 首选 方式 (http://slidesha.re/eW8wQ9)。 人 们 现在 主要 
使 用 手机 上 网 ， 而 手机 有 它 特有 的 问题 。 面 对 移动 互联 网 的 大 量 延 迟 ( 参 
见 1.2.1 节 ) 和 硬件 设备 问题 (诸如 WiFi 信号 强度 以 及 电池 续航 ， 参 见 
1.2.3 节 )， 尽 可 能 设计 和 开发 高 性 能 的 网 站 比 以 往 更 加 重要 。 我 们 的 目标 是 
为 用 户 节 省 不 必要 的 开销 ， 并 且 为 所 有 尺寸 的 屏幕 优化 感知 性 能 。 


响应 式 Web 设计 的 挑战 在 于 ， 很 容易 意外 加 载 不 必要 的 内 容 ， 比 如 过 大 的 
图 片 、 没 必要 的 CSS 和 JavaScript。 因 为 创建 一 个 响应 式 设计 的 网 站 时 ， 经 
第 会 为 优化 小 尺寸 屏幕 上 的 布局 和 内 容 而 添加 一 些 标记 语言 和 功能 ， 所 以 
很 多 设计 者 和 开发 者 甚至 都 没 意 识 到 他 们 的 网 站 在 移动 设备 上 会 传输 同样 
大 小 〈 相 较 于 桌面 版 ) 或 者 更 大 的 页 面 ， 这 一 点 都 不 稀奇 。 


许多 响应 式 网 站 的 创建 者 已 经 开始 将 上 述 问题 纳入 他 们 的 决策 考量 : 重新 
排列 内 容 ， 选 择 隐 藏 或 显示 各 种 元 素 、 设 计 灵活 的 层级 策略 等 。 还 需要 在 
这 个 啊 应 式 网 站 设计 流程 中 再 加 一 道 流 程 :确保 根据 页 面 大 小 和 请 求 量 只 
传输 必要 的 内 容 ， 不 只 是 信息 架构 。 





















































Guy Podjarny 发 现 (http://www.guypo.com/uncategorized/real-world-rwd-perfor- 
mance-take-2/) ， 目 前 大 多 数 响应 式 设计 的 网 站 在 不 同 屏幕 尺寸 的 设备 上 所 传 
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输 的 页 再 











i 大 小 几乎 是 一 样 的。 但 这 并 非 必 须 如 此 ， 世 





应 式 设 计 不 是 天 生 有 性 


中 











能 缺陷 ， 我 们 可 以 灵活 地 向 用 户 传输 内 容 。 在 设计 | 





应 式 .网 站 时 仔细 其 酌 资 


日 


源 加 载 策略 ， 就 能 创造 出 在 任何 尺寸 的 屏幕 上 都 表现 极 佳 的 用 户 体验 。 


5.1 谨慎 加 载 内 容 


我 们 在 创建 响应 式 网 站 时 ， 为 适 配 不 同 的 屏幕 尺寸 ， 通 常会 添加 更 多 的 媒 


体 查 询 ， 却 容易 忽略 这 可 能 会 给 
版 设计 改 成 小 屏幕 版 设计 时 尤为 突出 ， 





户 增加 额外 的 负担 。 这 个 问题 在 由 桌面 


那些 为 桌面 版 呈现 而 优化 的 资源 会 





如 何 变 化 ?通常 是 一 成 不 变 ， 图 片 还 是 











司 样 的 大 小 (只 是 通过 CSS 缩小 了 








视觉 尺寸 )， 字 体 的 传输 和 实现 也 和 桌 务 








版 一 样 。 我 们 需要 苦 酌 如 何 加 载 内 








容 ， 并 确保 所 传输 的 数据 都 是 用 户 绝对 需要 的 。 








图 5-1 是 打开 





5.1.1 图 片 

页 面 中 显示 的 图 片 大 小 不 应 该 给 用 户 带 来 任何 不 必要 的 负担 。 

了 开发 者 工具 的 Chrome 浏览 器 中 Google 首页 的 截屏 。Google logo 的 显示 
尺寸 比 它 的 实际 尺寸 小 。 





(Google 





Profiles | Resources | Audits Console PageSpeed 


(Google 


logollw.png 


e 
MIME type imagel 





png 
URL https://www.google.com/images/srpr/logol1lw.png 


七 








图 5-1: 在 这 个 例子 中 ， 我 们 可 以 看 到 Google logo 的 显示 尺寸 比 实际 尺寸 小 
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这 意味 着 用 户 加 载 了 不 必要 的 数据 ， 因 为 浏览 器 下 载 了 一 个 并 不 需要 那么 
大 来 显示 的 图 片 。 在 Chrome 开发 者 工具 中 选择 一 个 图 片 ， 可 以 看 到 图 片 的 
显示 尺寸 和 它 的 “原始 ”尺寸 ， 这 两 个 尺寸 通常 不 一 样 (如 图 5-2)。 











果 269 x 207 pixels (Natural: 538 x 190 pixels) 





"</JUIVS 











图 5-2: Chrome 开发 者 工具 会 告诉 你 一 张 图 片 的 原始 尺寸 和 显示 尺寸 


在 图 5-2 中 我 们 可 以 看 到 ，Google 加 载 的 可 能 是 一 张 适用 于 视网膜 屏 的 图 
片 。 由 于 视网膜 屏 显 示 时 会 填充 两 倍 的 像素 到 屏幕 ， 设 计 者 或 开发 者 会 用 
一 张 两 倍 于 实际 所 需 尺 寸 的 图 片 ， 然 后 在 浏览 器 中 缩放 到 显示 所 需 的 尺寸 ， 
这 样 可 以 使 图 片 在 视网膜 屏 中 看 上 去 很 清晰 。 不 幸 的 是 ， 这 也 使 没有 使 用 
视网膜 设备 的 用 户 加 载 了 不 必要 的 图 片 数据 。 


查看 一 下 你 网 站 的 图 片 ， 看 看 是 否 可 以 选用 合适 的 文件 大 小 。 告 诉 浏 览 器 
选择 图 片 的 方式 有 很 多 : RESS 方案 、CSS 媒体 查询 以 及 新 的 图 片 标准 。 



































RESS， 即 使 用 服务 器 闯 组 件 的 响应 式 Web 设计 ， 是 创建 和 选用 合适 尺寸 
图 片 的 一 种 方式 。 通 过 在 服务 器 端 选择 需要 传输 给 用 户 的 资源 来 优化 性 
能 ， 而 不 是 在 客户 端 优 化 。 服 务 器 可 以 从 用 户 代理 字符 串 中 获取 用 户 的 
屏幕 尺寸 、 设 备 能 力 〈 比 如 触 屏 ) 等 信息 ， 从 而 做 出 智能 的 决策 。 类 似 
Adaptive Images (http://adaptive-images.com/) 这 样 的 工具 可 以 检测 出 用 户 
的 屏幕 尺寸 ， 并 根据 事先 定义 的 窗口 大 小 自动 创建 、 缓 存 和 返回 适当 尺寸 
的 图 片 (参见 图 5-3)。Tom Barker 在 High Performance Responsive Desien 
(OReilly) 一 书 中 列举 了 许多 RESS 技术 及 实现 方法 。 

















Example in action 














5-3: Adaptive Images 官网 (http://adaptive-images.com/) 的 这 个 例 
子 中 ,我 们 可 以 看 到 一 张 图 片 可 以 通过 Adaptive Images 工具 生成 
不 同 像素 高 宽 和 文件 大 小 的 图 片 


但 是 ，RESS 方案 有 许多 次 端 。RESS 不 会 响应 客户 端的 尺寸 变化 (比如 ， 
如 果 用 户 将 设备 从 竖 屏 转 到 横 屏 )。 假 设 我 们 用 RESS 方案 给 用 户 提 供 了 一 
张大 小 调整 完美 的 图 片 。 如 果 用 户 旋 转 了 他 的 设备 并 且 响 应 式 设计 的 布局 
改变 了 ， 服 务 器 不 会 发 送 一 张 新 图 片 来 适应 新 布局 。 这 就 是 为 什么 媒体 查 
询 和 新 图 片 标准 这 些 技术 更 适合 解决 响应 式 图 片 问题 。 



































关于 响应 式 设计 中 哪 种 显示 合适 尺寸 图 片 的 CSS 方法 最 好 ， 已 经 有 大 量 
研究 ， 特 别 要 感谢 Tim Kadlec (https://timkadlec.com/2012/04/media-query- 
asset-downloading-results/) 和 Cloud Four (http://cloudfour.com/examples/media- 
queries/image-test/)。 但 是 ， 在 浏览 器 决定 为 含有 CSS 的 页 面 加 载 哪 张 〈 些 ) 
图 片 时 会 发 生意 想不到 的 状况 ， 这 就 是 为 什么 测试 网 站 的 性 能 并 确保 用 户 的 
浏览 器 只 加 载 必 需 的 资源 很 重要 。 








比如 ， 对 一 个 元 素 简单 地 设置 display: none 不 会 阻止 浏览 器 加 载 这 张 
图 片 : 





<div id="hide"> 
<img src="image.jpg" alt="Image"/> 
</div> 
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/* 说 真 的 ,不 要 这 样 做。 浏览 器 仍然 会 加 载 这 张 图 片 .*/ 














@media (max-width: 600px) { 
#hide { 
display: none; 


} 


将 display: none 用 到 一 个 设置 了 background-image 的 元 素 ， 这 个 背景 图 片 
同样 会 被 加 载 : 





<div id="hide"></div> 
/* 同 样 也 不 要 这 样 做 。 浏 览 器 仍然 会 加 载 这 张 图 片 。*/ 


#hide { 
background: url(image.jpg); 
} 


@media (max-width: 600px) { 
#hide f{ 
display: none; 
} 
} 


如 果 想 要 在 一 个 响应 式 设计 中 用 CSS 隐藏 一 张 图 片 ， 可 以 尝试 隐 藏 有 
background-image 元 素 的 父 元素 : 
<div id="parent"> 


<div></div> 
</div> 








/* 隐 藏 父 元 素 。 浏 览 器 不 会 加 载 这 张 图 片 。*/ 








#parent div { 
background: url(image.jpg); 
} 


@media (max-width: 600px) { 
#parent { 
display: none; 
} 
} 


标 代 方案 是 ， 人 异 幕 尺寸 加 载 什么 
background-image， 浏 览 器 会 加 载 匹 配 媒体 查询 的 图 片 : 
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<div id="match"></div> 


@media (min-width: 601px) { 
#match { 
background: url(big.jpg); 
} 
} 


@media (max-width: 600px) { 
#match { 
background: url(small.jpg); 
} 
} 


注意 ， 如 果 媒 体 查 询 重 倒 了 ， 旧 版 浏览 器 会 两 个 图 片 都 加 载 。 


如 何 用 CSS 设置 视网膜 屏 图 片 呢 ?对 大 多 数 浏 览 器 而 言 ， 我 们 可 以 用 媒体 
查询 指定 视网膜 屏 版 来 确保 只 加 载 视网膜 版 图 片 。 








<div id="match"></div> 


#match { 
background: url(regular.png); 
} 


@media (-webkit-min-device-pixel-ratio: 1.5)， 
(min--moz-device-pixel-ratio: 1.5)， 
(-o-min-device-pixel-ratio: 3/2), 
(min-device-pixel-ratio: 1.5) { 

#match { 
background: url(retina.png); 
} 
} 


很 不 地， 像素 比 大 于 等 于 1.5 的 、 运 行 Android 2.x 的 设备 会 加 载 两 种 
版 本 的 图 片 (regular.png 和 retina.png)， 但 Kadlec 在 他 的 文章 (https:/ 
timkadlec.com/2012/04/media-query-asset-downloading-results/) 中 提 到 ， 你 
不 太 可 能 会 遇 到 一 个 运行 Android 2.x 的 视网膜 屏 设 备 。 





在 现代 浏览 器 中 ， 显 示 适 当 尺 寸 图 片 最 好 的 办 法 是 利用 HTML 的 picture 
元 素 。 目 前 有 Chrome 38、Firefox 33、 和 Opera 25 支持 picture 元 素 ， 
它 还 是 新 的 图 片 标准 的 一 部 分 (https:Whtmlspec.whatwg.org/multipage/ 
embedded-content.html#the-picture-element) 。 这 个 新 标准 让 你 可 以 告诉 浏览 
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器 加 载 哪个 图 片 文件 ， 以 及 何 时 加 载 ， 它 还 对 不 支持 picture 元 素 的 浏览 器 
有 向 后 兼容 。 


下 面 这 个 例子 中 ，picture 元 素 用 媒体 查询 来 决定 该 加 载 哪个 图 片 文件 。 以 
从 上 到 下 的 顺序 ， 第 一 个 匹配 的 source 就 是 浏览 器 要 加 载 的 资源 : 

















<picture> 
<source media="(min-width: 800px)" srcset="big.png"> 
<source media="(min-width: 400px)" srcset="small.png"> 
<img src="small.png" alt="Description"> 

</picture> 


看 看 这 有 和 多么 神奇 。 我 们 不 但 可 以 通过 匹配 媒体 属性 告诉 浏览 器 加 载 哪 个 
图 片 ， 还 可 以 让 不 支持 picture 元 素 的 浏览 器 加 载 一 张 低 分 状 率 的 图 片 。 
Picturefill (http://scottjehl.github.io/picturefil/) 是 为 目前 尚 不 支持 picture 
元 素 的 浏览 器 提供 支持 的 “腻子 脚本 ”(polyfll) ， 所 以 你 现在 就 可 以 用 
picture | 有 一 条 很 好 的 经 验 法 则 : 定义 在 同一 个 picture 元 素 里 的 所 有 图 
片 应 该 可 以 用 相同 的 att 属性 描述 














合适 的 时 候 ， 你 也 可 以 用 picture 元 素 设置 视网膜 屏 图 片 ! 


<picture> 
<source media="(min-width: 800px)" 
srcset="big.png 1x, big-hd.png 2x"> 
<source media="(min-width: 600px)" 
srcset="medium.png 1x, medium-hd.png 2x"> 
<img src="small.png" srcset="small-hd.png 2x" 
alt="Description"> 
</picture> 








人 srcset 告诉 浏览 器 不 同 像素 密度 对 应 的 图 片 。 再 一 次 ， 我 
们 通过 精准 地 告诉 浏览 器 加 载 并 显示 哪 张 图 片 ， 为 用 户 布 省 了 加 载 开 销 。 


picture 元 素 还 有 一 个 强大 的 type 属 








性 : 


<picture> 
<source type="image/svg+xml" srcset="pic.svg"> 
<img src="pic.png" alt="Description"> 
</picture> 


ee de men 只 别 type 属性 值 的 内 容 ， 就 忽略 这 
个 图 片 资源 。 在 这 个 例子 中 ,外 ee 
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其 他 的 会 下 载 备 选 的 PNG 图 片 。 我 们 又 一 次 通过 精准 地 告诉 浏览 器 加 载 并 
显示 哪 张 图 片 ， 为 用 户 节 省 了 不 必要 的 页 面 负载 。 























如 果 是 流 式 设计 呢 ?” 或 者 ， 如 果 你 只 有 一 堆 不 同 的 图 片 尺 寸 ， 并 且 想 要 用 
户 的 浏览 器 不 需 列 出 指定 的 视 口 尺寸 或 屏幕 分 辨 率 就 可 以 选择 最 合适 的 资 
源 ， 该 怎么 办 呢 ? 图 片 标 准 也 可 以 帮 上 忙 一 一 使 用 sizes 属性 ， 它 的 语法 
如 下 : 
































sizes="[media query] [length], 
[media query] [length], 
ete rd 
[default length]" 











sizes 属性 中 的 每 个 媒体 查询 对 应 一 个 图 片 在 页 面 中 显示 的 长 度 ， 相 对 于 视 
口 尺 寸 。 即 如 果 长 度 是 33.3vw， 浏 览 器 就 会 将 图 片 显 示 为 视 口 宽度 的 33%。 
如 果 长 度 是 109vw， 浏 览 器 会 将 图 片 显 示 为 视 口 宽度 的 100%。 这 个 公式 帮 
助 浏览 器 为 用 户 选择 最 合适 的 图 片 。 


sizes 很 巧妙 ， 因 为 在 确定 加 载 正确 的 图 片 之 前 ， 它 会 查看 每 个 媒体 查询 。 
在 这 个 例子 中 ， 我 们 可 以 告诉 浏览 器 ， 在 更 大 的 屏幕 中 ， 图 片 会 显示 为 视 
口 宽 度 的 33%， 但 图 片 默 认 宽 度 是 视 口 宽度 的 100%: 






























































sizes="(min-width: 1000px) 33.3vw, 
100vw" 
浏览 器 通过 图 片 的 srcset 列表 来 查看 它们 的 外 形 尺 寸 。 我 们 可 以 在 列表 中 
以 image.jpg 360w 这 种 语法 告诉 浏览 器 每 个 图 片 的 宽度 ， 这 里 image.jpg 
是 图 片 文 件 的 路 径 ，369w 指明 了 这 张 图 片 的 宽度 为 360 像素 : 


























<img srcset="small.jpg 400w, 
medium.jpg 800w, 
big.jpg 1600w" 
sizes="(min-width: 1000px) 33.3vw, 
100vw" 
src="small.jpg" 
alt="Description"> 


有 了 srcset 中 的 图 片 列表 和 sizes 中 的 显示 宽度 列表 ， 浏 览 器 就 可 以 基于 
媒体 查询 和 视 口 尺寸 选择 最 佳 图 片 来 加 载 并 呈现 给 用 户 。 这 在 你 使 用 内 容 
管理 系统 时 也 派 得 上 有 用场， 让 CMS 系统 生成 图 片 的 资源 和 代码 。 用 这 种 方 
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式 ，CMS 用 户 只 需 上 传 一 个 版 本 的 图 片 ， 而 无 需 担 心 它 在 不 同 尺 寸 屏幕 中 
的 显示 问题 。 注 意 ， 正 如 这 个 例子 中 所 演示 的 那样 ， 我 们 不 用 picture 元 素 
也 可 以 使 用 新 的 图 片 标 准 ! 


我 们 可 以 配合 使 用 这 个 新 标准 的 各 个 方面 ， 以 增强 浏览 器 选择 最 佳 图 片 来 
加 载 和 展示 的 能 力 。 我 们 也 可 以 给 不 同 尺 寸 的 屏幕 提供 不 同 裁剪 的 图 片 ， 
也 可 以 名 Ri th tape re oi 让 浏览 器 可 以 
基于 媒体 查询 选择 正确 的 图 片 。 这 一 切 都 有 利于 提升 性 能 





























5.1.2 ”字体 

字体 文件 会 给 网 站 带 来 巨大 的 额外 开销 ， 因 为 它们 需要 额外 的 请 求 并 且 增 
加 了 页 面 大 小 。 正 如 4.3 节 中 所 讨论 的 那样 ， 尽 可 能 优化 字体 文件 性 能 的 方 
法 有 很 多 。 可 以 考虑 在 你 的 响应 式 设计 中 ， 只 在 大 屏 场 景 下 加 载 自 定义 字 
体 文件 。 我 们 在 Esty 就 是 这 么 做 的 ， 这 样 就 能 让 移动 设备 用 户 避 免 加 载 额 
外 的 字体 文件 。 























怎么 实现 呢 ? 在 内 容 中 设置 普通 的 备 选 字体 ， 然 后 用 媒体 查询 只 为 大 屏 设 
备 设 置 网 络 字体 : 


@font-face { 
font-family: 'FontName'; 
src: url('fontname.woff') format('woff'); 


} 


body { 
font-family: Georgia, serif; 


} 


@media (min-width: 1000px) { 
body { 
font-family: 'FontName', Georgia, serif; 
} 
} 


这 样 就 会 只 在 用 户 设备 匹配 媒体 查询 时 加 载 使 用 网 络 字 体 。 所 有 浏览 器 
(IE8 以 及 更 低 版 本 除外 ) 都 会 仅 在 需要 时 加 载 字体 文件 。IE8 以 及 更 低 版 
本 会 下 载 页 面 的 CSS 文件 中 引用 的 所 有 @font-face 文件 ， 即 便 在 页 面 中 没 
有 用 到 。 





























5.2 方案 


在 实际 的 设计 和 开发 过 程 中 ， 会 有 许多 网 站 的 响应 式 设计 方面 的 决策 ， 在 
开始 工作 之 前 ， 最 好 花 点 时 间 考 虑 一 下 整体 方案 以 及 它 对 性 能 有 何 影响 。 
把 性 能 作为 项 目 文档 的 一 部 分 ， 以 移动 优先 的 角度 看 待 网 站 ， 确 定 如 何 通 
过 媒体 查询 衡量 网 站 的 性 能 ， 这 些 有 利于 创建 一 个 反应 迅速 、 啊 应 式 设计 
的 网 站 。 








5.2.1 项 目 文 档 
尽 可 能 将 性 能 纳入 所 有 项 目的 文档 。( 不 仅仅 是 响应 式 Web 设计 ! ) 在 一 
个 啊 应 式 设计 网 站 中 ， 你 会 制定 性 能 基准 ， 并 持续 衡量 相同 标准 的 性 能 指 
标 ， 比 如 页 面 总 大 小 、 页 面 总 加 载 时 间 、 用 Speed Index 计算 的 感知 性 能 
等 。 除 此 之 外 ， 你 还 要 为 不 同 的 设备 和 媒体 查询 设立 不 同 的 目标 ， 而 不 仅 
仅 是 整体 页 面 的 平均 值 。 


7.3 节 中 会 介绍 一 些 在 开发 过 程 中 在 网 站 速度 上 做 出 让 步 的 方式 。 通 过 设置 
一 个 性 能 预算 ， 就 能 够 在 权衡 美感 和 性 能 时 做 出 让 步 。 许 多 响应 式 设 计 都 
会 做 出 同样 的 让 步 ， 可 能 你 想 要 在 某 个 媒体 查询 中 用 一 张大 图 片 ， 但 这 超 
出 了 预算 ， 所 以 你 需要 裁减 额外 的 字体 负载 来 省 出 时 间 。 表 5-1 是 一 个 响应 
式 设计 的 性 能 预算 示例 。 


表 5-1: 响应 式 设 计 性 能 预算 示例 













































































性 能 指标 目 标 竺 和 注 

页 面 总 加 载 时 间 2 秒 适用 所 有 窗口 大 小 
页 面 总 大 小 500 KB min-width: 900 px 
页 面 总 大 小 300 KB max-width: 640 px 
Speed Index 1000 适用 所 有 窗口 大 小 


在 项 目 文档 中 设置 一 些 关 于 如 何 针 对 任何 设备 避免 不 必要 的 页 面 大 小 或 请 
求 的 预期 。 另 外 ， 要 明确 指出 你 会 为 每 个 媒体 查询 或 屏幕 尺寸 衡量 这 些 性 
能 指标 ， 以 及 你 的 目标 是 什么 ， 如 表 5-1 所 示 。 这 些 性 能 预算 可 能 有 一 些 模 
糊 。 比 如 ， 如 果 旋 转 设备 使 它 切换 了 预算 场景 该 怎么 处 理 ? 有 必要 设 一 个 
基准 线 ， 以 表明 性 能 的 重要 性 ， 并 给 项 目 中 的 所 有 人 设置 预期 。 记 住 ， 这 
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不 仅 对 移动 用 户 有 利 ， 对 桌面 用 户 同样 有 利 。 


5.2.2 ”移动 优先 


任何 网 站 以 移动 优先 原则 来 设计 都 会 有 很 多 好 处 ， 这 会 促使 你 做 以 下 事情 。 


。 预先 凸显 关键 问题 “这 个 页 面 的 核心 目的 是 什么 ?”)。 

。 为 用 户 提 供 最 重要 的 功能 和 内 容 。 

。 建立 设计 模式 以 及 它们 在 不 同 尺 寸 的 屏幕 上 会 如 何 变化 。 

。 从 无 障碍 访问 的 角度 考虑 网 站 (“在 低 网 速 或 低 端 设 备 上 的 可 访问 性 如 
何 ?”)。 


以 移动 优先 的 方案 切入 ， 可 以 避免 许多 设计 者 和 开发 者 在 尝试 将 一 个 桌 首 
版 体验 改造 到 移动 设备 时 产生 的 格格 不 入 之 感 。 可 以 通过 添加 功能 、 引 入 
更 强大 的 动画 和 样式 ， 以 及 利用 更 新 设备 的 特性 等 方式 渐进 式 地 增强 网 站 ， 
在 添加 的 时 候 要 注意 对 性 能 的 影响 。 


移动 体验 不 应 该 是 草率 的 ， 而 应 该 是 经 过 深思 熟 虚 的， 设计 者 和 开发 者 应 
该 利用 网 站 运行 的 每 个 平台 的 优势 ， 并 认识 到 它们 的 限制 。 移 动 不 是 桌面 
的 附庸 ， 反 之 亦 然 。 内 容 同等 并 不 意味 着 每 个 平台 的 体验 应 该 是 一 样 的 ， 
在 设计 开发 时 应 考虑 用 户 的 需求 。 


移动 优先 会 迫使 你 更 早 地 问 自 己 用 户 的 核心 需求 是 什么 ， 并 将 有 利于 提升 
网 站 的 性 能 。 了 解 用 户 的 意图 将 会 帮助 你 把 注意 力 集中 在 应 该 给 他 们 传输 
什么 类 型 的 资源 上 。 一 个 仔细 为 小 屏幕 芯 酌 功能 与 内 容 架 构 的 方案 ， 会 帮 
助 你 减少 页 面 大 小 和 请 求 数量 。 首 先 考虑 网 站 最 重要 的 内 容 和 资源 ， 而 不 
是 通过 媒体 查询 来 处 理 小 屏幕 ， 会 极 大 地 帮助 你 掌控 性 能 。 


在 响应 式 网 站 设计 中 ， 应 优先 考虑 最 小 尺寸 的 屏幕 ， 优 先 为 小 尺寸 屏幕 样 
式 编写 CSS， 然 后 以 渐进 式 增强 的 方式 为 更 大 的 屏幕 添加 内 容 和 功能 。 传 
输 大 小 合适 的 资产， 确保 没有 滚动 内 避 ， 并 且 尽 可 能 提高 核心 功能 的 响应 
速度 。 然 后 ， 可 以 决策 如 何在 大 屏幕 上 使 用 更 大 的 资产， 重新 排 布 内 容 ， 
并 在 总 体 用 户 体验 中 持续 其 酌 性 能 。 

























































































5.2.3 衡量 一 切 

我 们 在 第 6 章 会 介绍 在 迭代 和 测试 设计 的 过 程 中 如 何 持续 地 衡量 性 能 ， 这 
些 策略 在 所 有 网 站 中 都 会 用 到 ， 但 在 衡量 一 个 响应 式 设计 时 ， 还 有 一 些 额 
外 的 考虑 。 


首先 ， 要 确保 每 种 场景 都 只 加 载 合适 的 内 容 ， 有 72% 的 网 站 (http://www. 
guypo.com/uncategorized/real-world-rwd-performance-take-2/) 在 所 有 屏幕 尺 
寸 下 都 是 一 样 的 响应 式 设计 ， 请 不 要 成 为 其 中 一 员 。 


有 能 力 的 话 ， 就 实现 一 套 可 以 测量 每 种 选 定 场景 的 页 面 总 大 小 的 自动 化 测 
试 。Tom Barker 的 High Performance Responsive Design 一 书 中 有 一 章 专 门 
讲述 了 可 持续 的 Web 性 能 测试 ， 介 绍 了 如 何 实现 衡量 每 种 场景 下 性 能 的 
Phantom JS 测试 ， 包 括 YSlow 总 分 和 页 面 总 大 小 。 


这 


























也 可 以 手动 测试 这 些 ， 用 Chrome 开发 者 工具 模拟 一 台 设备 ， 然 后 用 资源 面 
板 查 看 那 台 设备 加 载 的 是 哪 张 图 。 下 面 是 一 个 基于 场景 选择 不 同 图 片 的 媒 
体 查 询 的 例子 : 
































@media (min-width: 601px) { 
section { 
background: url(big.png); 
} 
} 


@media (max-width: 600px) { 
section { 
background: url(small.png); 
} 
} 


不 仅 要 确保 加 载 正 确 的 图 片 ， 还 要 确保 非 该 场景 使 用 的 图 片 没 有 加 载 。 我 
用 Chrome 开发 者 工具 禁用 缓存 模拟 Google Nexus 10 来 匹配 大 屏 的 媒体 查 
询 (如 图 5-4)， 模 拟 Google Nexus 4 匹配 小 屏 的 媒体 查询 (如 图 5-5)。 
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ee 
和 iO 本 汪 DPreserve log Disable cache 


Name M... St... IT... Initiator Size Ti... Timeline 
responsivete... GET 200 te... Other 77681 5... 6 国 
口 big,png GET 200 i... respo... 6.5KB 7... 


2 requests | 7.3 KB transferred | 28 ms (load: 68 ms, DOMContentLoaded: 28 ms) 
Console Search | Emulation | Rendering 

| Device | Google Nexus 10 本 
Screen Y et 

Emulate Reset 

User Agentv [Eee [Eee 

Viewport: 1280 x 800, devicePixelRatio = 2 

User agent: Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JSS15Q) A... 














Sensorsv 








图 5-4: 这 个 例子 中 ， 我 模拟 了 Google Nexus 10 来 看 会 加 载 哪 张 图 。 在 网 


络 面板 中 ,我们 可 以 看 到 加 载 的 是 big.png 











Q Elements |Network| Sources Timeline Profiles Resources » 汪 这 器 ,x 
二 YO 可 江口 preservelog 加 Disablecache 

Name IM... (St... 工 .Initiator Size Ti... Timeline 

回 responsivete... ‘GET 200 a | 776B | EE” 

[| small.png CET 200 i... respo... 2.2KB 5... 


2 requests | 2.9 KB transferred | 27 ms (load: 34 ms, DOMContentLoaded: 23 ms) 
Console Search | Emulation | Rendering 














| Device | Google Nexus 4 s 
Screen Y 和 
Emulate Reset 
User Agent Y | Emulate | | Reset | 
Sensors Y Viewport: 384 x 640, devicePixelRatio = 2 


User agent: Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 4 Build/JO... 











图 5-5: 模拟 器 切换 到 Google Nexus 4 之 后 刷新 页 面 ， 可 以 看 到 加 载 的 图 片 
是 small.png 而 不 是 big.png 


每 个 模拟 的 设备 都 正确 地 加 载 了 所 需 的 图 片 ， 我 们 也 可 以 看 到 页 面 总 大 小 
的 变化 : 大 屏 设 备 是 7.3 KB， 小 屏 设备 是 2.9 KB 。 继 续 查 看 项 目 计划 中 每 
个 场景 下 的 资源 和 页 面 传输 的 总 大 小 ， 确 保 它 们 符合 你 的 目标 。 


要 衡量 每 个 场景 下 的 页 面 总 加 载 时 间 和 Speed Index， 可 以 用 WebPagetest 
的 相应 下 拉 列 表 切 换 浏 览 器 (如 图 5-6) 和 连接 速度 (如 图 5-7)。 
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Connection 


Number of Tests to Run 
Uptio 9 


Repeat View 


Capture Video 


IE8 

IE 9 

IE 10 

IE 11 

Chrome 

Canary 

Firefox 

Firefox Nightly 
Safari (Windows) 
iPhone 4 iOS 5.1 

Motorola G - Chrome 

Motorola G - Chrome Beta 

Nexus 5 - Chrome 

Nexus 5 - Chrome Beta 

Motorola E - Chrome 

Motorola E - Chrome Beta 

Nexus 7 - Chrome 

Nexus 7 - Chrome Beta 

Nexus 7 Landscape - Chrome 
Nexus 7 Landscape - Chrome Beta 


1oOn 

















图 5-6: 在 WebPagetest 测试 中 ， 可 以 选择 各 种 各 样 的 移动 浏览 器 





Connection 





Y Cable (5/1 Mbps 28ms RTT) 
DSL (1.5 Mbps/384 Kbps 50ms RTT) 
FIOS (20/5 Mbps 4ms RTT) 
S6K Dial-Up (49/30 Kbps 120ms RTT) 
Mobile 3G - Fast (1.6 Mbps/768 Kbps 150ms RTT) 
Native Connection (No Traffic Shaping) 


Number of Tests to Run 
Uptog 
Repeat View 
Custom 
Capture Video 而 














图 5-7: 在 WebPagetest 测试 中 ， 可 以 选择 各 种 各 样 的 模拟 网 速 





在 WebPagetest 所 在 地 弗吉尼亚 村 








览 器 。 这 个 测试 点 包含 了 物理 
面 测试 。 














在 连接 下 拉 列 表 中 列 H 


[ 惑 斯 ， 浏 


的 不 同 连 接 是 用 流量 调整 创建 的 。 这 


1 上 DR 


网 本 


下 拉 列 表 中 包含 一 些 移动 浏 


设备 ， 比 如 iPhone 4 和 Nexus 5， 你 可 以 在 上 


个 
已、 


味 着 Chrome 


开发 者 工具 会 模拟 用 户 在 这 种 连接 类 型 中 可 能 的 体验 ， 但 每 次 测试 的 结果 
都 是 一 样 的 ， 因 为 测试 实际 上 是 在 WiFi 中 进行 的 。 








| 大 


镍 5 


贡 
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比较 每 个 场景 的 结果 ， 以 确保 页 面 总 加 载 时 间 和 Speed Index 符合 或 超出 项 
目 文档 中 列 出 的 目标 。 


本 书 中 的 其 他 技术 也 会 帮助 你 优化 响应 式 设计 的 性 能 。 当 你 设计 响应 式 网 
站 时 ， 务 必 仔 细 思 考 用 户 会 加 载 什么 资源 。 为 每 种 场景 设置 一 个 性 能 预算 
并 且 以 移动 优先 的 方式 设计 和 开发 这 个 网 站 。 者 想 深 入 了 解 如 何 优 化 啊 应 
式 网 站 前 后 端 性 能 ， 推 荐 看 一 下 Tom Barker 的 High Performance Responsive 
Design。 








在 工作 中 ， 随 着 网 站 的 变化 要 一 如 既往 地 收集 性 能 数据 ， 这 会 帮助 你 掌控 
页 面 的 加 载 时 间 。 在 下 一 章 ， 我 们 会 介绍 记录 网 站 性 能 的 工具 和 惯用 做 法 ， 
以 便 你 对 网 站 的 用 户 体验 有 一 个 全 面 的 了 解 。 
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第 6 章 
性 能 评估 与 迭代 





性 能 基准 测试 不 仅 对 理解 用 户 体验 的 现状 很 关键 ， 也 对 未 来 如 何 改善 性 能 
有 指导 意义 。 例 行 检查 页 面 的 速度 指标 ， 如 主要 页 面 的 总 加 载 时 间 、 总 大 
小 以 及 感知 性 能 指标 Speed Index， 你 将 可 以 看 到 网 站 是 否 变 慢 了 (最 好 还 
能 知道 为 什么 ) 。 表 6-1 列 出 了 用 于 测试 网 站 性 能 的 主要 工具 ， 其 中 大 部 分 
在 本 章 都 会 介绍 。 


表 6-1: 基准 概览 


























工 具 类 型 基准 测试 测试 时 机 
YSlow 浏览 器 插件 ”全面 评级 ， 推 荐 开发 时 ， 然 后 每 个 季 
度 一 次 
Chrome 开发 者 工具 ”浏览 器 插件 推荐， 瀑布 图 ， 每 秒 帧 数 开发 时 ， 然 后 每 个 季 
度 一 次 
WebPagetest 综合 测试 全 面 评级 ， 推 荐 ， 瀑 布 图 ， 每 次 有 大 的 更 改 或 试 
Speed Index 验 时 


Catchpoint、Gomez、 综 合 测试 ( 趋 网 站 性 能 的 变化 趋势 每 月 一 次 
wpt-script 等 势 统 计 ) 
Google Analytics、 真 实用 户 监控 大 量 用 户 统计 数据 的 加 载 每 周一 次 
mpPulse、Glimpse 等 时 间 中 位 数 


随 着 网 站 的 成 长 与 变化 ， 会 有 很 多 因素 导致 性 能 的 提升 或 下 滑 ， 很 有 必要 
用 浏览 器 插件 、 综 合 测试 以 及 真实 用 户 监 控 等 方式 来 跟 进 这 些 性 能 指标 的 
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变化 。 


6.1 浏览 器 工具 


要 看 网 站 的 基本 加 载 时 间 (第 2 章 ) 如 何 ， 可 以 在 开发 时 用 浏览 器 插件 测 
试 。YSlow 和 Chrome 开发 者 工具 可 以 帮 你 看 到 网 站 是 否 符 合 关 键 的 性 能 优 
化 原则 。 


6.1.1 YSlow 


正如 2.2 节 中 提 到 的 ，YSlow (https://developer.yahoo.com/yslow/) 是 一 个 
非常 优秀 的 用 于 查看 页 面 总 资源 大 小 的 工具 。YSlow 是 一 个 浏览 器 插件 ， 
可 用 于 Firefox、Opera、Chrome 和 Safari， 可 以 通过 命令 行 调 用 ， 也 可 以 作 
为 一 个 书签 工具 。 除 了 检查 页 面 不 同 资源 的 文件 大 小 ，YSlow 还 会 推荐 一 
些 缩短 页 面 加 载 时 间 (如 图 6-1) 的 基本 方法 。 





ALL (23) FILTER BY: CONTENT (6) | COOKIE (2) | CsS (6) | IMAGES (2) | JAVASCRIPT (4) | SERVER (6) [WW Tweet| 四 Share 








A Make fewer HTTP requests 





C Use a Content Delivery Network (CDN) 





A Avoid empty src or href 





D Add Expires headers 





本 Grade D on Add Expires headers 
A Compress components with gzip 





A Put CSS at top There are 3 static components without a far-future expiration date. 


A Put javascript at bottom » (2014/7/14) http:/ /www. le-analytics.com, ls 
» (2014/7/13) http:/ /laraswanson.com /favicon.ico 
*。 (2014/7/13) http:/ /laraswanson.com/css/light.css 











A Avoid CSS expressions 





n/a Make JavaScript and CSS external 





A Reduce DNS lookups 








Minify JavaScript and CSS Web pages are becoming increasingly complex with more scripts, 
style sheets, images, and Flash on them. A first-time visit to a page 

i i may require several HTTP requests to load all the components. By 
Coen Crete using Expires headers these components become cacheable, which 
avoids unnecessary HTTP requests on subsequent page views. 
Expires headers are most often associated with images, but they 
can and should be used on all page components including scripts, 
style sheets, and Flash. 








Remove duplicate JavaScript and CSS 








Make AJAX cacheable 





2Read More 
Use GET for AJAX requests 





A 
A 
A 
A Configure entity tags (ETags) 
A 
A 
A 


Reduce the number of DOM elements Copyright © 2014 Yahool Inc. All rights reserved. 

















图 6-1: YSlow 会 给 你 一 些 优化 性 能 的 建议 ， 包 括 加 载 顺 序 、 压 缩 以 及 缓存 


看 一 下 YSlow 给 你 的 推荐 。 ET 我 按 它 的 建议 添加 了 超时 请 求 
头 ， 看 看 会 应 用 到 哪些 文件 。 通 过 这 个 建议 ， 我 很 容易 看 出 哪些 资产 需要 
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添加 缓存 ， 这 里 ， 我 可 以 忽略 关于 缓存 Google Analytics 脚本 的 部 分 ， 因 为 
它 是 由 第 三 方 (Google) 提供 的 ， 缓 存 规则 不 由 我 掌控 。 














说 明 

查看 任何 工具 自动 生成 的 推荐 时 ， 要 记 住 你 才 是 最 了 解 网 站 的 人 。 你 
会 发 现 一 些 建议 并 不 不 适合 你 的 网 站 ， 也 许 你 知道 你 的 优化 方式 给 用 
户 创造 了 最 好 的 体验 ， 也 许 一 些 优化 建议 是 针对 你 无 法 掌控 的 第 三 方 
脚本 的 ， 或 者 你 知道 菜 一 个 优化 建议 并 不 适用 于 你 团队 的 开发 流程 。 
务必 阅读 完 每 一 条 推荐 ， 看 看 是 否 适用 于 你 的 网 站 ， 如 果 这 些 建议 并 
不 完全 适用 ， 也 不 必 担 心 ，Web 性 能 优化 是 没有 万 全 之 策 的 。 


YSlow 会 给 你 一 个 整体 的 性 能 评分 ， 这 可 以 当成 一 个 长 期 的 优化 目标 (如 
图 6-2)。 持 续 跟 进 这 个 分 数 ， 并 且 在 你 迭代 更 新 网 站 的 设计 、 内 容 、 后 端 
等 时 定期 地 检查 一 下 这 个 分 数 的 变化 ， 确 保 你 持续 跟 进 最 新 的 性 能 优化 进 
展 。 可 以 拿 这 个 分 数 以 及 这 些 优化 建议 到 PageSpeed Insights 上 做 个 比较 
(https://developers.google.com/speed/pagespeed/insights/)， 这 也 是 Google 的 
一 个 在 线 Web 性 能 分 析 工 具 。 











Home | Grade | Components | Statistics Rulesets | YSlow(V2) +) | Edit | (3) Help 上 
Grade @ Overall performance score 95 Ruleset applied: YSlow(V2) URL: http://laraswanson.co mj 











图 6-2: YSlow 会 对 你 的 页 面 性 能 进行 评级 ， 随 着 网 站 的 成 长 以 及 优化 建议 的 
变化 ， 你 应 该 定期 查看 


可 以 在 开发 新 页 面 或 对 现 有 网 站 进行 修改 时 用 YSlow 检查 一 下 ， 或 者 每 三 
个 月 检查 一 次 ， 看 一 切 是 否 稳定 如 初 ， 然 后 比较 一 下 前 后 的 性 能 评级 和 优 
化 建议 。 





6.1.2 ”Chrome 开发 者 工具 

要 进行 更 深入 的 优化 ， 可 以 打开 Chrome 开发 者 工具 运行 网 页 性 能 审查 。 开 
发 者 工具 会 分 析 页 面 并 给 你 一 些 基 本 的 性 能 优化 提示 (如 图 6-3)。 这 里 提 
到 的 浏览 器 插件 提供 的 建议 会 有 一 些 重 琶 ， 你 需要 像 在 其 他 插件 中 那样 查 
看 开发 者 工具 中 的 每 一 条 建议 ， 以 确认 它们 是 否 适用 于 你 的 网 站 。 


























106 | 第 6 章 








Q Elements Network Sources Timeline Profiles Resources |Audits| Console 
到 Network Utilization = 
(多) Audits > 
@» Leverage browser caching (26) 
> Leverage proxy caching (7) 


区 http:/ /laraswansonicom) ® » Minimize cookie size 
Gs T Web Page Performance 


http:/ /laraswanson.com/ @ 上 Optimize the order of styles and scripts (1) 


时 > Remove unused CSS rules (3952) 
> Use normal CSS property names instead of vendor-prefixed ones (24) 





RESULTS 











图 6-3: Chrome 开发 者 工具 可 以 对 页 面 运行 一 次 审查 ， 并 给 你 一 些 基 本 的 性 
能 优化 提示 





检验 了 开发 者 工具 提供 的 基本 优化 建议 之 后 ， 查 看 一 下 网 络 标签 (如 图 
6-4)。 这 一 标签 会 显示 开发 者 工具 打开 时 ， 页 面 发 起 资源 请 求 的 时 间 线 ， 这 
有 助 于 你 在 开发 网 站 时 收集 信息 瀑布 流 。 





























Q Elements |Network| Sources Timeline Profiles Resources Audits Console 
二 @ 了 汪 DPresevelog 
Name Statu: 5 Tim 
he Initiator Timelit 
Path Med | Ta RE Content | Latency oy 200 300s 
3)] laraswanson.com 304 2288 4lams 
/| Other 

国 GE oon wm am am 
| ss eer 304 oa laraswanson com1:8 228B 143ms | Blocking |1.110ms 
ES /es Not Modiflee HESS parser 5.9KB 142ms | DNS Lookup n 
襄 和 304 laras a 2348 298ms | Connecting 
i Not Modiflee image1png Parser 64ka 297ms | Sending 0.272ms| 

oajs 304 ndexj:17 1628 am | 
二 - | Receivir 1.945 ms 
国 ww 393K8 199ms| Receving SE 

vG53j60AUwzrel-0 本 301 ee 4378 。 30lms 
| www.youtube.com/embed Moved Perm texthtm Ot 08 181ms 








图 6-4: Chrome 开发 者 工具 网 络 标签 显示 了 打开 开发 者 工具 之 后 ， 页 面 发 起 
的 资源 请 求 时 间 线 ， 有 助 于 你 开发 网 站 时 收集 信息 瀑布 流 


网 络 标签 相当 好 用 ， 它 可 以 帮助 你 查看 关键 路 径 受 到 什么 影响 ， 查 看 哪 
个 资源 加 载 时 间 过 长 ， 以 及 每 个 请 求 的 延迟 类 型 是 什么 。 你 也 可 以 看 到 
Cookie 信息 ， 可 以 按 资 源 加 载 时 间或 延迟 来 排序 ， 可 以 用 请 求 类 型 过 渡 。 
可 以 在 网 络 标签 里 随意 看 看 ， 确 保 关键 浑 染 路 径 是 合理 的 ， 并 且 没 有 任何 
请 求 需要 很 长 的 时 间 来 完全 加 载 。 


Chrome 开发 者 工具 还 有 助 于 识别 卡 顿 。 在 渲染 工具 窗口 打开 FTP (Frames 
Per Second， 每 秒 帧 数 ) 标尺 (如 图 6-5)， 可 以 查看 网 站 页 面 的 哪个 区 域 会 
引起 每 秒 帧 数 的 下 降 ， 这 是 感知 性 能 的 一 个 量化 数据 。 





I 
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图 6-5: Chrome 开发 者 工具 可 以 用 FPS 标尺 帮助 你 识别 页 面 的 哪个 区 域 引 








起 卡 顿 


在 Eksy， 我 们 发 现 我 们 的 一 个 页 面 会 在 用 户 向 下 滑动 时 产生 卡 顿 。 我 们 用 
这 个 FPS 标尺 来 定位 问题 区 域 (在 我 们 的 案例 中 ， 在 一 些 元 素 上 过 多 的 
box-shadow 会 引起 卡 顿 )， 以 便 修复 并 消除 滚动 时 的 卡 顿 。 我 们 发 现 解决 这 
个 问题 对 相关 指标 的 统计 数据 有 显著 的 正面 影响 。 你 可 以 在 开发 一 个 新 设 
计 或 特性 时 ， 用 Chrome 开发 者 工具 的 审查 建议 、 网 络 标签 以 及 泻 染 工具 查 
看 一 下 你 的 网 站 ， 在 那 之 后 就 可 以 每 个 季度 查看 一 次 。 


现在 你 可 以 用 各 种 各 样 的 浏览 器 插件 检查 你 的 网 站 ， 完 整地 实施 它们 的 建 
议 ， 对 网 站 的 时 间 线 和 帧 率 做 抽样 检查 ， 所 以 是 时 候 用 更 多 的 浏览 器 和 地 
理 位 置 获取 一 个 更 加 真实 的 性 能 基准 集 了 。 



































6.2 ”综合 测试 


用 浏览 器 插件 检查 了 你 的 网 站 之 后 ， 最 好 了 解 一 下 网 站 在 你 自己 的 浏览 器 
和 地 理 位 置 之 外 的 表现 。 综 合 性 能 工具 能 帮 你 更 好 地 了 解 网 页 在 第 三 方 测 
试 位 置 和 设备 上 的 加 载 ， 你 能 看 到 网 站 在 全 世界 各 种 平台 上 的 表现 。 

在 迭代 和 优化 网 站 设计 时 ， 用 综合 测试 设置 一 个 性 能 指标 基线 。 综 合 测试 
并 不 代表 用 户 访问 你 网 站 时 的 真实 体验 (这 个 用 真实 用 户 监控 最 好 )， 但 是 
它 比 你 只 在 自己 的 浏览 器 上 测试 要 好 。 





























WebPagetest (http://www.webpagetest.org/) 是 一 个 非常 流行 的 、 文 档 充 足 
的 、 健 壮 的 综合 性 能 测试 解决 方案 。 你 可 以 通过 WebPagetest (如 图 6-6) 
获取 到 网 站 表现 的 诸多 细节 。 




















FS WEBPAGETEST 





TEST HISTORY FORUMS DOCUMENTATION ABOUT 


Test a website's performance 


Eap 
Enter a Website URL 


Test Location Dulles, VA USA (IE 8-11,Chrome,Firefox,Android,iOS) 上 


he 


1 run, Cable connection, reeulta are public 





Run a free website speed testfrom multiple locations around the globe using real browsers (IE and Chrome) and at real consumer 
connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content 
blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page 
Speed optimization checks and suggestions for improvements, 


Ifyou have any performanceloptimization questions you should visitthe Forums where industry experts regularly discuss Web 
Performance Optimization 








图 6-6: WebPagetest 提供 了 免费 的 来 自 世 界 各 地 各 种 浏览 器 的 速度 测试 


在 WebPagetest 用 默认 设置 运行 测试 时 ,会 有 一 个 第 一 视图 和 二 次 视图 ， 以 
便 你 比较 资源 缓存 前 后 的 加 载 时 间 。 测 试 默认 是 电缆 连接 。 你 可 以 在 高 级 
设置 (如 图 6-7) 中 设置 更 多 的 运行 次 数 。 我 建议 设置 为 5 次 ，WebPagetest 
会 在 结果 报表 中 分 别 使 用 第 一 视图 和 二 次 视图 的 中 位 数 。 
































Test Settings | Advanced | Chrome | Auth | Script | Block | SPOF | Custom 





Connection Cable (5/1 Mbps 28ms RTT) 





Number of Tests to Run 5 
Uptog 


Repeat View @ FirstView and Repeat View (First View Only 


Capture Video 加 


Keep Test Private 


Label 














图 6-7: WebPagetest 的 高 级 设置 可 以 设置 更 多 的 运行 次 数 ， 不 同 的 连接 类 
型 ， 以 及 很 多 其 他 测试 设置 ， 比 如 禁用 JavaScript 或 者 让 某 个 特定 
主机 失效 
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WebPagetest 会 将 这 些 结果 保存 一 年 ， 以 便 你 在 优化 网 站 页 面 加 载 时 间 时 
与 之 前 的 测试 结果 对 比 。 如 果 你 创建 一 个 WebPagetest 账 号， 就 可 以 看 到 
你 自己 独立 于 其 他 人 的 测试 。 你 也 可 以 拥有 一 个 私有 的 WebPagetest 实例 
(https://sites.google.com/a/webpagetest.org/docs/private-instances) ! 私有 实例 
的 好 处 包括 测试 一 个 开发 中 〈 非 线 上 ) 网 站 的 能 力 ， 这 非常 有 利于 将 性 能 
考量 并 入 设计 开发 流程 中 。 你 可 以 用 私有 实例 自动 测试 (https://github.com/ 
etsy/wpt-script) 以 便 节 省 你 自己 的 时 间 。 




















WebPagetest 提供 页 面 性 能 优化 建议 ， 类 似 于 PageSpeed 和 YSlow。 点 击 
测试 结果 视图 上 方 的 Performance Review 链接 ， 可 以 查看 测试 结果 的 细节 
(如 图 6-8) 以 及 页 面 可 优化 的 空间 。 
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图 6-8: WebPagetest 提供 各 种 性 能 指标 的 评级 和 缩短 页 面 加 载 时 间 的 优化 
建议 

除了 监控 WebPagetest 的 Performance Review 以 及 First Byte Time 和 Compress 

Images 的 分 数 外 ， 检 查 一 下 你 的 瀑布 流 。 查 看 瀑布 流 时 ， 注 意 找 出 那些 特别 

耗 时 的 请 求 ， 如 图 6-9 所 示 。 这 些 可 能 是 偶然 结果 ， 这 也 是 为 什么 一 次 运行 

多 次 测试 然后 查看 平均 结果 会 更 好 。 它 们 也 可 以 指出 文件 大 小 或 内 容 阻 塞 方 

看 的 问题 。 
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图 6-9: 用 WebPagetest 查看 页 面 的 瀑布 流 时 ， 找 出 那些 加 载 特别 耗 时 的 请 求 


看 一 下 如 何 创建 一 个 漂亮 的 、 简 短 的 页 面 瀑 布 流 ， 也 看 一 下 WebPagetest 的 
Speed Index 总 分 。2.3.3 布 介绍 过 ，Speed Index 是 页 面 可 视 部 分 显示 的 平 
均 耗 时 。 它 会 帮助 你 测试 页 面 的 感知 性 能 ， 因 为 它 会 告诉 你 “第 一 屏 页 面 ” 
的 内 容 要 多 久 才能 呈现 给 用 户 。 

比较 两 个 测试 结果 时 ，WebPagetest 会 创建 一 个 图 表 ， 展 示 随 着 时 间 推 移 可 
视 区 域 的 泻 染 进度 。 在 图 6-10 中 ， 我 们 可 以 看 见 起 初 Bing 的 可 视 区 域 演 染 
得 比 Google 快 ， 但 之 后 Google 的 页 面 渲染 更 快 一 些 。 





























可 视 区 域 的 泻 染 进度 (%) 


100 团 Google 
转 Bing 
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图 6-10: WebPagetest 的 Speed Index 总 分 指示 页 面 可 视 部 分 完全 显示 的 
平均 时 间 。 比 较 两 个 WebPagetest 测试 时 ， 可 以 看 到 一 个 表示 可 
视 区 域 显示 进度 的 图 表 
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在 图 6-10 中 ，Google 的 Speed Index 分 数 为 1228，Bing 的 分 数 为 1393， 这 
个 分 数 越 小 越 好 。 务 必 为 你 自己 的 页 面 设 置 一 个 Speed Index 分 数 基 准 ， 并 
且 随 着 网 站 的 变化 持续 地 评估 这 项 指标 ， 因 为 这 是 页 面 感知 性 能 非常 重要 
的 指标 。 


务必 也 测试 首 字 节 时 间 、 页 面 完全 可 见 的 时 间 ， 以 及 页 面 用 WebPagetest 完 
全 加 载 完 成 的 时 间 。 比 较 不 同 浏 览 器 和 地 理 位 置 的 WebPagetest 测试 结果 来 
观察 这 些 指标 的 变化 。 找 出 那些 加 载 时间 过 长 或 者 关键 路 径 可 能 阻塞 的 异 
常 点 (更 多 内 容 详 见 2.3.3 节 )。 
































当 你 在 迭代 一 个 设计 或 者 优化 网 站 性 能 时 ， 用 WebPagetest 来 测试 优化 前 
后 的 结果 。 务 必 使 用 WebPagetest 的 幻灯 片 视图 或 者 视频 来 对 比 页 面 加 载 
时 间 在 一 段 时 间 内 的 变化 。 每 次 你 的 网 站 有 大 的 修改 或 者 运行 试验 时 也 用 
WebPagetest 测试 一 下 。 














像 WebPagetest 这 样 的 综合 测试 工具 非常 适合 在 优化 网 站 性 能 时 用 来 设 定性 
能 基准 ， 以 及 监控 网 站 在 一 段 时 间 的 变化 对 页 面 加载 时 间 和 感知 性 能 的 影 
响 。 在 对 性 能 基准 和 这 些 性 能 基础 的 迭代 驾轻就熟 之 后 ， 就 可 以 着 手 实现 
真实 用 户 监控 了 ， 看 看 用 户 每 天 在 你 网 站 上 的 真实 体验 。 


6.3 ”真实 用 户 监控 


真实 用 户 监控 (Real User Monitoring，RUM) 会 捕获 你 网 站 的 网 络 流 量 ， 
以 便 你 分 析 页 面 实际 耗费 多 长 时 间 加 载 给 用 户 。 真 实用 户 监控 工具 能 为 你 
提供 用 户 在 体验 你 的 网 站 时 遇 到 的 实际 问题 ， 而 不 像 综 合 测试 ， 给 你 单一 
的 来 自 自动 服务 的 数据 点 。 


有 大 量 的 真实 用 户 监控 工具 ， 它 们 的 价格 、 功 能 和 适用 范围 都 不 尽 相 同 。 
Google Analytics (http:Wwww.google.comy/analytics/) 、mPulse (http://www. 






































soasta.com/products/mpulse/) 以 及 Glimpse (http://www.catchpoint.com/products/ 
glimpse-real-user-measurement/) 都 是 真实 用 户 监控 工具 ， 你 可 以 对 比 一 下 看 
哪个 适合 你 的 网 站 。 


选 好 真实 用 户 监控 工具 之 后 ， 看 一 下 在 一 段 时 间 内 你 网 站 的 主要 页 面 在 用 
户 面前 的 表现 。 首 页 、 高 频 着 陆 页 、 任 何 类 型 的 付款 流程 ， 以 及 网 站 中 革 








全 
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他 访问 量 较 高 的 重要 区 域 ， 应 该 包含 在 你 的 主要 报告 中 。 查 看 这 些 页 面 的 
用 户 加 载 时 间 时 ， 用 不 同 的 方式 分 割 数据 以 便 对 终端 用 户 的 体验 有 更 全 
的 了 解 。 

















。 地 理 位 置 ( 离 数 据 中 心 的 距离 近 / 远 ， 主 要 用 户 所 在 的 区 域 ) 
。 网 络 类 型 (移动 网 络 、WiFi 等 ) 
。 页 面 总 加 载 时 间 的 中 位 数 以 及 第 95 个 百 分 位 的 值 


为 什么 是 95% ? 

第 95 个 百 分 位 是 另 一 种 阐述 网 站 性 能 痛 点 的 方式 。 中 位 数 会 让 你 大 体 了 解 
用 户 访问 页 面 所 需 的 加 载 时 间 ， 但 第 95 个 百 分 位 指标 对 确保 绝 大 部 分 用 户 
有 一 个 绝 佳 的 体验 非常 重要 。 第 95 个 百 分 位 是 页 面 访问 最 慢 的 5%， 但 5% 
仍然 是 你 的 用 户 基数 中 很 重要 的 一 部 分 。 在 RUM 中 ， 第 95 个 百 分 位 是 衡 
量 用 户 网 络 连 接 有 多 慢 的 一 个 标尺 ， 较 慢 的 连接 总 是 会 被 归 到 较 高 的 百 分 
位 。 需 要 注意 的 是 ，Google Analytics 提供 页 面 的 平均 加 载 时 间 ， 而 不 是 百 


分 位 。 





有 了 这 些 数据 ， 就 可 以 开始 分 析 不 同 用 户 群 体 之 间 的 差异 ， 如 图 6-11 所 示 。 
页 面 加 载 时 间 中 位 数 和 第 95 个 百 分 位 有 什么 不 同 ? 网 站 在 其 他 国家 的 用 户 
面前 表现 如 何 ? 移动 设备 用 户 感觉 如 何 ? 最 主要 的 5 个 页 面 的 加 载 时 间 有 
显著 不 同 吗 ? 















































OO [ve Page Load Time (sed) $] 
(compared to site average) 
1. 乙 United States 
Tablet and Desktop Traffic -35.1 7 
Mobile Traffic 2424 
2 加 United Kingdom 
Tablet and Desktop Traffic 二 54.40% 
Mobile Traffic -100.00% 











图 6-11: 将 真实 用 户 监控 数据 分 类 分 析 ， 以 找到 性 能 优化 切入 点 ， 同 时 更 好 
地 理解 用 户 访问 你 的 网 站 时 的 真实 感受 。 在 Google Analytics 的 这 
个 截图 中 ， 可 以 看 到 在 不 同 国家 在 不 同 设备 上 加 载 时 间 的 差异 
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分 开 来 看 这 些 差 异 存在 的 原因 ， 并 找 出 解决 这 些 问题 的 办 法 。 真 实用 户 监 
控 工 具 的 结果 能 帮助 你 更 准确 地 把 握 所 有 用 户 在 你 网 站 上 的 真实 体验 ， 并 
帮助 你 排列 性 能 优化 和 改进 的 优先 级 。 


在 用 综合 测试 和 真实 用 户 监控 工具 测试 网 站 性 能 之 后 ， 尽 可 能 地 进行 性 能 
优化 ， 直 到 网 站 的 用 户 体验 稳定 。 保 持 网 站 性 能 长 期 稳定 是 一 项 挑战 ， 所 
以 ， 下 一 章 会 介绍 在 取得 这 些 初 步 成 果 之 后 ， 如 何 持续 监控 网 站 性 能 以 确 
保 它 保持 快速 。 


6.4 持续 改变 

随 着 网 站 的 成 长 ， 内 容 会 逐渐 增多 ， 设 计 也 在 迭代 。 要 对 网 站 性 能 进行 例 
行 检查 ， 以 查看 页 面 大 小 、 总 加 载 时 间 以 及 感知 性 能 是 否 有 明显 变化 ， 以 
及 任何 其 他 方面 的 变化 。 


























你 很 可 能 不 是 网 站 唯一 的 工作 人 员 ， 可 能 有 其 他 设计 者 、 开 发 者 和 内 容 编 
辑 人 员 ， 他 们 对 网 站 所 做 的 改变 可 能 会 影响 网 站 的 加 载 顺序 、 文 件 大 小 、 
滚动 卡 顿 等 。 通 过 设 定 网 站 性 能 基准 并 定期 检查 ， 就 能 找到 性 能 方面 任何 
意外 的 变化 。 首 页 突然 因为 新 的 图 片 幻灯 效果 而 加 载 时 间 加 倍 ? 一 个 营销 
脚本 是 否 已 经 加 到 网 站 的 每 个 页 面 ? 一 个 博 主 突然 上 传 了 比 实际 所 需 大 5 
倍 的 图 片 ?确保 定期 检查 你 的 主要 页 面 并 找 出 这 些 性 能 变化 。 图 6-12 中 对 
比 了 一 段 时 间 内 我 的 网 站 用 户 的 平均 加 载 时 间 。 






































Overview 
Avg. Page Load Time (sec) ~ Vs. Selecta metric Hourly Day Week Month 


Jun 12, 2014 - Jul 12, 2014: ® Avg. Page Load Time (sec) 
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Avg. Page Load Time (sec) Avg. Redirection Time (sec) | (sec) (sec) (sec) 
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图 6-12: Google Analytics 让 比较 网 站 一 段 时 间 的 加 载 平均 时 间 变 得 很 容易 


也 有 可 能 随 着 时 间 并 没有 发 生 显著 的 变化 ， 但 是 性 能 却 在 非常 平缓 地 衰减 。 
这 些 问 题 更 难以 定位 和 修复 。 对 于 更 大 、 更 复杂 的 网 站 ， 你 可 能 会 发 现 首 
字 节 响应 时 间 增 加 ， 或 者 第 95 个 百 分 位 的 加 载 时 间 越 来 越 长。 通过 定期 对 
性 能 进行 基准 测试 ， 除 了 对 比 两 周 的 数据 ， 还 可 以 对 比 两 个 季度 的 数据 ， 
这 也 有 助 于 你 让 其 他 人 警惕 性 能 方面 不 太 明 显 的 变化 。 你 和 你 的 团队 越 关 
注 性 能 ， 在 应 对 网 站 增长 的 次 在 问题 时 就 越 得 心 应 手 。 


正如 3.3 布 所 介绍 的 那样 ， 定 期 检查 网 站 的 图 片 。 定 期 检查 精灵 图 的 洁净 
度 、 图 片 格式、 图片 压 缩 。 确 保 新 上 传 到 网 站 的 图 片 都 会 自动 压缩 并 且 在 
以 正确 的 大 小 使 用 。 同 时 ， 检 查 网 站 最 重要 的 5 个 页 面 的 大 小 ， 如 有 果 它 们 
之 中 有 任何 显著 地 增加 ， 找 出 其 中 的 原因 ， 然 后 解决 这 个 问题 或 找 出 其 他 
改进 页 面 性 能 的 切入 点 。 如 果 有 性 能 预算 ， 可 以 经 常用 它 来 找 出 其 他 解决 
页 面 加 载 时 间 增 长 问题 的 方式 〈 详 见 7.3 节 )。 但 所 有 这 些 工 作 都 需要 你 定 
期 检查 网 站 的 性 能 是 否 良 好 ， 并 且 以 方便 比较 的 方式 长 期 记录 归档 。 


有 些 公司 用 一 个 内 部 维基 页 面 来 手动 跟踪 性 能 变化 ， 有 些 公司 会 使 用 来 自 
性 能 监控 工具 等 第 三 方 的 数据 或 WebPagetest 的 自 托管 选项 数据 创建 仪表 盘 
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和 和 警报 。 把 性 能 指标 及 性 能 变化 原因 记录 下 来 ， 你 就 能 看 出 网 站 的 哪些 变 
化 〈 重 新 设计 、 新 广告 或 营销 代码 ) 对 性 能 有 巨大 影响 ， 以 及 哪些 影响 较 
小 (比如 内 容 或 图 片 的 小 变化 )。 


Etsy 2014 年 一 季度 的 网 站 性 能 报告 

在 过 去 的 3 个 月 ， 总 体 上 页 面 加 载 时 间 的 中 位 数 和 第 95 个 百 分 位 
的 值 均 有 些许 增加 ， 而 首页 的 增 量 更 多 。 我们 正在 首页 上 进行 一 
些 试 验 ， 其 中 有 一 项 明显 比 其 他 项 慢 很 多 ， 这 导致 第 95 个 百 分 位 
的 值 升 高 了 。 然 而 我 们 意识 到 这 可 能 会 使 测试 结果 偏 移 ， 所 以 我 
们 想 要 从 试验 中 获得 初步 结果 ， 然 后 再 优化 这 项 指标 。 





这 种 日 志 有 助 于 教导 你 身边 的 人 理解 他 们 的 工作 对 终端 用 户 体验 的 影响 ， 
也 有 助 于 你 维护 自己 权衡 美感 和 性 能 的 决定 ， 我 们 将 在 第 7 章 介 绍 这 些 。 
通过 对 每 周 的 性 能 数据 及 变化 原因 进行 基准 比较 ， 可 以 让 你 所 在 机 构 的 每 
个 人 在 日 常 的 设计 和 开发 流程 中 做 出 明知 的 决策 。 


竞争 对 手 的 页 面 加 载 时 间 也 需要 长 期 关注 。 可 以 的 话 ， 也 要 对 他 们 的 页 面 
性 能 进行 测试 和 基准 比较 。 这 样 ， 你 可 以 获得 他 们 性 能 优势 的 数据 ， 也 可 
以 帮助 你 了 解 他 们 在 进行 哪 方面 的 用 户 体验 优化 。 找 到 一 个 主要 的 性 能 变 
化 并 研究 它 : 他 们 是 否 添 加 了 新 的 营销 追踪 ， 是否 使 用 了 更 好 的 大 幅 广 告 
图 ， 或 者 实现 了 指示 新 品牌 的 网 络 字 体 ? 这 些 数据 有 助 于 你 向 领导 们 证 明 
网 站 性 能 的 重要 性 。 






































持续 关注 性 能 是 一 份 非常 细致 的 工作 ， 所 以 你 应 该 尝试 将 这 种 数据 收集 工 
作 自 动 化 ， 并 在 发 生 重要 变化 时 发 出 警告 。 用 获取 到 的 数据 建立 仪表 盘 并 
将 其 分 享 给 你 的 同事 。 如 有 果 你 有 性 能 预算 或 者 服务 级 别 的 性 能 指标 协定 ， 
确保 在 你 的 图 表 中 标示 出 来 ， 以 便 可 以 看 出 有 多 大 提升 空间 或 者 有 多 少 工 
作 要 做 。 性 能 仪表 盘 对 观察 那些 更 难 发 现 的 性 能 衰减 非常 有 帮助 。 


性 能 增益 和 衰减 的 自动 警报 也 会 为 你 节省 大 量 的 时 间 。 如 有 果 一 个 主要 页 面 
的 总 加 载 时 间 每 周 都 在 增加 ， 你 应 该 以 一 种 更 便捷 的 方式 知晓 。 给 你 发 送 
一 封 邮 件 或 一 条 警告 信息 ， 对 比 以 前 的 性 能 基准 和 现在 的 性 能 基准 ， 使 其 
更 容易 分 析出 变化 的 确切 时 间 。 如 果 可 能 的 话 ， 可 以 在 网 站 性 能 变化 时 给 
相关 领域 的 负责 人 发 送 和 警报。 也 可 以 在 性 能 增益 时 发 送信 息 ， 在 性 能 有 重 
大 提升 时 给 相关 负责 人 发 送 祝 损 信 息 并 感谢 他 们 的 辛苦 工作 。 
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一 段 时 间 之 后 ， 你 会 通过 美感 和 性 能 两 方面 的 优化 影响 页 面 加 载 时 间 。 务 
必用 A/B 测试 度量 这 些 变化 以 及 它们 对 你 的 业务 指标 的 影响 。 你 可 以 特意 
做 一 个 性 能 改进 ， 不 然 某 项 设计 上 的 变化 可 能 会 对 性 能 造成 负面 影响 。A/B 
测试 对 追踪 这 些 非常 有 帮助 ! 标记 性 能 的 变化 ， 尤 其 是 当 你 可 以 直接 将 它 
列 为 网 站 应 有 的 工作 时 ， 会 使 你 和 同事 在 美感 和 性 能 方面 做 出 明智 的 选择 。 
下 一 章 ， 我 们 会 验证 试验 对 整体 用 户 体验 的 优化 是 多 么 重要 ， 并 会 介绍 一 
些 在 权衡 设计 和 性 能 时 可 能 遇 到 的 挑战 。 
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第 7 章 
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网 站 的 总 体 用 户 体验 由 以 下 多 方面 组 成 : 外观 与 感觉 、 可 访问 性 、 信 息 架 
构 、 可 用 性 ， 等 等 。 性 能 只 是 总 体 用 户 体验 的 一 部 分 。 我 们 可 以 用 性 能 改 
进 网 站 的 其 他 方面 。 如 果 减 少 了 页 面 大 小 ， 可 以 让 低 带 宽 的 用 户 更 易 访问 。 
如 果 优 化 了 感知 性 能 ， 网 站 会 让 人 感觉 起 来 更 好 。 


但 是 ， 为 网 站 加 速 是 需要 付出 代价 的 。 它 会 占用 你 本 打算 用 来 优化 其 他 用 
户 体验 的 开发 时 间 。 你 可 能 会 为 了 优化 性 能 而 牺牲 其 他 方面 的 用 户 体验 
(比如 外 观 和 感觉 )。 本 章 将 全 面 介绍 介入 性 能 优化 工作 的 时 机 ， 要 付出 什 
么 代价 ， 以 及 何 时 值得 这 么 做 。 


7.1 找到 平衡 点 


现在 你 知道 浏览 器 如 何 请 求 、 接 收 以 及 将 内 容 呈 现 给 用 户 。 你 理解 不 同 格 
式 图 片 的 使 用 以 及 它们 最 合适 的 使 用 场景 。 你 已 经 芳 虑 过 在 HTML 和 CSS 
代码 中 设计 模式 的 语义 与 其 他 用 途 ， 并 且 理 解 为 关键 路 径 调整 加 载 顺 序 的 
重要 性 。 你 掌握 了 性 能 ， 现 在 是 时 候 使 用 这 些 新 技能 















































性 能 与 美感 息息相关 ， 前 端 架 构 师 与 咨询 师 Harry Roberts 提 到 :“ 网 站 不 在 
于 看 着 有 多 漂亮 ， 而 在 于 运行 得 有 多 漂亮 ， 给 人 感觉 如 何 。 如 果 一 个 晶莹 
剔透 的 界面 需要 20 秒 才能 加 载 到 用 户 设备 上 ， 那 再 漂亮 也 没有 意义 了 ， 用 
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户 早 就 在 看 到 它 之 前 离开 了 。” 


如 果 只 需要 简单 地 遵循 相同 的 模式 和 指南 ， 也 许 今天 会 有 更 多 的 人 在 做 性 
能 优化 的 事情 。 但 不 幸 的 是 ， 要 做 好 性 能 需要 做 出 一 些 艰难 的 决定 。 有 幸 
的 是 ， 掌 握 这 些 Web 工作 原理 ， 有 助 于 你 为 自己 以 及 网 站 做 出 正确 的 选 
择 。 理 解 了 JPEG 格式 压缩 图 片 的 方式 ， 你 就 知道 该 如 何 选择 图 片 的 导出 质 
量 ， 甚 至 是 否 应 该 使 用 JPEG 格式 。 理 解 了 字符 子 集 以 及 页 面 上 的 请 求 数量 
如 何 影响 性 能 ， 你 就 可 以 决定 一 个 页 面 使 用 多 少 种 字号 了 。 






















































































有 时 ， 你 的 选择 会 偏向 性 能 ， 有 时 ， 你 的 选择 会 偏向 美感 。 关 键 在 于 用 所 
擎 担 的 所 有 信息 为 你 和 你 的 网 站 做 出 正确 的 决定 。 





在 项 目 开 始 时 ， 你 会 在 一 些 艰难 的 选择 间 权 衡 ， 如 表 7-1。 


表 7-1: 美感 与 性 能 考量 示例 




















问题 美感 考虑 性 能 考虑 
可 以 在 每 个 页 面 顶 部 放 一 张大 图 吗 ? ” 抓 眼球 ， 很 好 地 这 可 能 是 一 个 相当 大 的 文件 ， 
代表 品牌 我 们 要 尽 可 能 减少 页 面 大 小 

















可 以 用 efont-face 做 3 个 显示 粗细 和 排版 灵活 性 高 ” 要 尽 可 能 减少 请 求 和 页 面 大 小 
一 个 文本 粗细 吗 ? 























可 以 在 首页 放 一 个 幻灯 播放 效果 吗 ? ”展示 许多 不 同 的 要 尽 可 能 减少 请 求 和 页 面 大 小 
内 容 (尤其 是 用 户 可 能 根本 看 不 到 
的 内 容 ) 
如 何 演示 产品 的 工作 方式 ? 用 视频 或 动态 图 视频 和 动态 图 会 非常 大 











每 次 的 答案 可 能 都 不 同 ， 取 决 于 当时 的 情况 ， 比 如 使 用 的 代码 库 、 项 目 截 
止 日 期 、 团 队 成 员 以 及 他 们 的 技能 水 平 、 网 站 的 外 观 和 感觉 ， 等 等。 表 7-2 
显示 了 权衡 这 些 考虑 之 后 所 做 的 决定 。 


表 7-2: 网 站 决策 示例 





















































问 题 决定 
可 以 在 每 个 页 面 顶 部 放 一 张大 图 吗 ? ”当然 ， 我 们 会 确保 图 片 不 会 使 用 太 多 颜色 ,并 且 
会 压缩 得 当 
J 以 用 @font-face 做 3 个 显示 粗细 我 们 会 使 用 两 个 显示 粗细 并 用 系统 字体 呈现 正文 
和 一 个 文本 粗细 吗 ? 内 容 
可 以 在 首页 放 一 个 幻灯 播放 效果 吗 ? ”不 ， 不 值得 为 此 用 户 体验 而 增 大 请 求 和 页 面 大 小 
如 何 演示 产品 的 工作 方式 ? 我 们 会 自 托管 一 个 异步 加 载 的 视频 
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为 客户 Fasetto 工作 时 ，Roberts 和 品牌 设计 师 Naomi Atkinson 艰难 地 在 美 
感 和 性 能 之 间 取 舍 。 有 这 样 一 个 例子 ， 他 们 想 要 展示 Fasetto 使 用 起 来 多 么 
简单 ， 并 决定 用 GIF 动画 。 但 是 ， 明 知道 GIF (尤其 是 动画 图 ) 可 能 会 很 
大 ， 为 什么 还 要 用 这 种 方案 ? 





。 Atkinson 擅长 制作 GIF 动画 。 在 做 这 个 决定 的 时 候 ，Roberts 和 Atkinson 
意识 到 ， 他 们 既 要 考虑 对 工具 的 熟悉 度 和 开发 成 本 ， 又 要 权衡 美感 和 性 
能 。 

。 用 CSS 动画 取代 GIF 可 能 会 增加 CSS 文件 的 大 小 ， 他 们 本 来 计划 用 一 
个 请 求 获取 CSS 文件 。Roberts 专注 于 网 站 的 关键 路 径 ， 并 且 想 要 让 GIF 
在 页 面 加 载 时 产 进 式 加 载 ， 而 不 是 作为 关键 路 径 的 一 部 分 。 

。 Atkinson 能 够 限制 GIF 所 使 用 的 色彩 数 ， 以 发 挥 这 种 文件 格式 的 压缩 算 
法 优势 。 她 专注 于 在 外 观 和 文件 大 小 之 间 寻 求 平衡 。 








最 终 GIF 动画 的 大 小 只 有 不 到 35 KB， 异 常 值 为 90 KB。Atkinson 和 
Roberts 依靠 他 们 在 性 能 方面 的 知识 做 出 了 精明 的 设计 决策 ， 并 且 尽 可 能 藉 
客户 提供 了 最 好 的 用 户 体验 。 


你 如 果 遇 到 下 列 选择 ， 权 衡 一 下 : 
。 性 能 差异 
4 
4 
4 














会 增 减 多 少 请 求 ? 
会 增 减 多 少 页 面 大 小 ? 
会 如 何 影响 感知 性 能 ? 
4 对 品牌 有 何 影响 ? 
4 对 已 有 设计 模式 有 何 影响 ? 
4 对 总 体 用 户 体验 有 何 影 响 ? 
4 这 种 方案 的 可 维护 性 如 何 ? 会 使 网 站 代码 更 简洁 吗 ? 
4 目前 的 团队 可 以 实现 这 种 方案 吗 ? 
4 需要 花费 多 长 时 间 ? 
4 团队 学 习 这 种 技术 有 收益 吗 ? 能 否 用 到 其 他 项 目 上 ? 








在 这 么 多 不 同 的 、 有 了 时 其 至 是 对 立 的 方案 中 找到 一 个 折 囊 办 法 确实 是 个 挑 
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战 。 但 是 ， 现 在 你 已 经 有 了 性 能 相关 的 知识 ， 你 可 以 用 这 些 知识 为 终端 用 
户 做 出 好 的 方案 选择 。 还 有 一 些 技术 可 以 让 你 做 选择 时 更 加 容易 : 将 性 能 
纳入 日 常 工作 流程 以 降低 开发 成 本 ， 所 有 新 设计 都 用 一 个 性 能 预算 把 关 ， 
并 且 持 续 地 试验 设计 以 了 解 你 的 设计 方案 是 否 符合 预期 。 


7.2 ”将 性 能 作为 工作 流程 的 一 部 分 
降低 性 能 优化 工作 成 本 的 一 个 方法 是 ， 通 过 实现 工具 和 定期 进行 性 能 基准 
测试 ， 将 其 纳入 日 常 工作 流程 。 

















本 书 中 提 到 了 很 多 可 以 纳入 日 常 开发 流程 的 工具 。 


。 当 有 新 图 片 添加 到 网 站 时 自动 压缩 。 

。 使 用 图 片 大 小 调整 服务 并 缓存 ， 这 样 就 不 用 手动 为 每 个 屏幕 尺寸 创建 新 
图 片 。 

。 在 设计 指南 中 说 明 复 制 粘贴 的 模块 ， 以 方便 复 用 。 

。 用 浏览 器 插件 检查 页 面 大 小 和 关键 路 径 。 



































通过 将 性 能 工作 纳入 日 常 工 作 流 程 并 尽 可 能 将 其 自动 化 ， 你 可 以 将 这 项 工 
作 的 运作 成 本 降 到 最 低 。 你 对 工具 的 熟悉 程度 会 提高 ， 你 养 成 的 习惯 会 让 
你 的 优化 工作 更 快 ， 并 且 会 有 更 多 时 间 做 新 的 事情 ， 以 及 教 其 他 人 如 何 做 
好 性 能 优化 。 


你 的 长 期 日 常 工作 也 应 该 包含 性 能 。 持 续 地 对 改进 以 及 产生 的 性 能 增益 进 
行 基准 测试 ， 并 将 此 作为 项 目 周 期 的 一 部 分 ， 以 便 将 来 为 性 能 工作 维护 成 
本 。 找 出 已 有 设计 模式 的 其 他 使 用 方式 并 记录 下 来 。 随 着 用 户 的 成 长 ， 现 
代 浏 览 器 技术 也 在 发 展 ， 例 行 检查 浏览 器 特有 的 样式 、 特 殊 处 理 以 及 其 他 
过 时 的 技术 ， 看 是 否 可 以 清理 。 所 有 这 些 工 作 会 最 小 化 性 能 工作 的 运作 成 
本 ， 并 让 你 找到 更 多 权衡 美感 和 性 能 的 办 法 。 


7.3 ”基于 性 能 预算 尝试 新 设计 
权衡 美感 和 页 面 速度 时 做 决策 的 一 个 关键 是 理解 你 有 什么 回旋 空间 。 通 过 


在 早期 建立 性 能 预算 ,你 可 以 在 页 面 的 一 个 区 域 辆 牲 性 能 而 在 另 一 个 地 方 
补 上 来 。 表 7-3 中 列举 了 一 些 可 量化 的 网 站 性 能 指标 。 
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表 7-3: 性 能 预算 的 例子 










































































指 标 最 大 值 工 具 说 明 
页 面 总 加 载 时 间 2 秒 WebPagetest，3G 网 络 下 运行 5 次 的 所 有 页 面 
中 值 
页 面 总 加 载 时 间 2 秒 真实 用 户 监控 工具 ， 不 同 地 区 用 户 的 所 有 页 面 
中 值 
页 面 总 大 小 800 KB WebPagetest 所 有 页 面 
速度 指数 1000 ”WebPagetest， 使 用 杜 勒 斯 地 区 3G 网 除 首 页 外 的 所 有 页 面 
络 下 在 Chrome 中 运行 
速度 指数 600 WebPagetest， 使 用 杜 勒 斯 地 区 3G 网 首页 
络 下 在 Chrome 中 运行 








通过 预先 定义 预算 ， 你 可 以 在 某 个 区 域 偏向 美感 而 在 另 一 个 区 域 偏向 性 能 。 
这 样 一 来 ， 就 不 总 是 选择 偏向 页 面 速 度 ， 你 有 机 会 偏向 复杂 的 图 形 ， 比 如 ， 
如 果 你 能 在 其 他 地 方 将 网 页 速度 追 回 ， 并 不 超出 预算 。 你 可 以 调用 更 多 的 
字体 ， 因 为 你 可 能 通过 移 除 一 些 图 片 请 求 弥补 了 性 能 。 你 可 以 协商 砍 掉 一 
个 营销 追踪 脚本 以 增加 一 个 更 好 的 大 幅 广告 图 。 通 过 定期 测量 网 站 性 能 
对 比 目 标 ， 你 会 持续 地 找 出 平衡 点 。 


要 决定 性 能 目标 ， 可 以 先 做 兑 品 分 析 。 看 竞争 对 手 的 表现 如 何 ， 并 确保 你 
的 性 能 预算 低 于 他 们 。 你 也 可 以 将 工业 标准 用 到 预算 中 : 以 2 秒 或 者 更 低 
的 页 面 总 加 载 时 间 为 目标 ， 你 知道 这 是 用 户 期 望 的 网 站 加 载 时间 。 
随 着 你 越 来 越 擅长 优化 性 能 以 及 工业 标准 的 变化 ， 性 能 预算 也 要 随 之 变化 。 
持续 地 推动 你 和 你 的 团队 把 网 站 做 得 越 来 越 快 。 如 果 你 有 一 个 响应 式 设计 
的 网 站 ， 也 要 为 不 同 的 屏幕 尺寸 制定 预算 ， 如 表 5-1 所 介绍 的 那样 。 

































































性 能 目标 应 该 总 是 可 度量 的 。 务 必要 详细 记录 优化 目标 、 度 量 工具 ， 以 及 
其 他 度量 的 任何 细节 。 可 以 参见 第 6 章 有 关 如 何 度量 性 能 的 介绍 ， 让 你 团 
队 中 的 每 个 人 都 了 解 这 个 预算 ， 并 用 它 来 衡量 他 们 的 工作 。 


sb * 多 和 
7.4 结合 性 能 试验 设计 
做 性 能 工作 时 ， 你 所 拥有 的 最 重要 的 超 能 力 是 度量 工作 成 效 的 能 力 。 你 可 
以 度量 一 切 : 做 这 项 改进 花费 了 你 多 长 时 间 ? 对 网 站 跳出 率 有 什么 影响 ? 
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它 是 否 值得 牺牲 美感 ? 你 是 否 可 以 一 对 一 地 对 比 两 个 选项 ， 并 且 衔 量 哪个 
对 用 户 更 好 (A/B 测试 ) ? 


通过 度量 来 看 你 的 决策 是 否 达 到 预期 效果 。 如 果 说 有 一 件 事 是 我 通过 多 年 
A/B 测试 所 学 到 的 ， 那 就 是 我 总 是 会 有 惊喜 。 作 为 已 经 了 解 用 户 基础 的 开 
发 者 和 设计 者 ， 我 们 经 常 直 接 跳 到 结论 ， 并 假设 我 们 知道 什么 对 用 户 体验 
最 好 ， 而 不 是 度量 用 户 对 我 们 方案 的 真实 反应 。 如 果 你 还 没有 开始 试验 ， 
那 是 时 候 开始 了 。 


在 A/B 测试 中 ， 你 可 以 将 一 个 网 站 页 面 的 两 个 不 同 版 本 同时 推送 给 不 同 的 
用 户 群 。 能 看 到 测试 的 用 户 数量 将 决定 你 的 网 站 需要 运行 多 久 。 通 过 同时 
运行 两 个 不 同 的 版 本 并 采集 用 户 看 到 测试 后 的 反应 ， 可 以 了 解 到 我 们 关于 
美感 与 性 能 的 权衡 方案 对 总 体 用 户 体验 有 什么 影响 。 更 多 关于 如 何 设置 与 
运行 试验 的 内 容 ， 可 以 参见 关于 A/B 测试 的 入 门 教程 (http://alistapart.com/ 


article/a-primer-on-a-b-testing/) 。 











我 已 经 被 性 能 试验 的 结果 惊 到 了 。 比 如 ， 有 几 次 用 户 对 字体 的 加 粗 作 出 了 
积极 的 反应 ， 即 便 它 降低 了 页 面 速度 。 但 是 ， 很 多 性 能 试验 让 我 确信 了 页 
面 速度 对 总 体 用 户 体验 的 重要 性 ， 比 如 当 我 们 给 页 面 增加 160 KB 的 隐藏 图 
片 时 ， 发 现 移 动 设 备用 户 的 跳出 率 增加 了 12%。 如 果 你 要 做 一 个 艰难 的 设 
计 决 定 ， 做 个 试验 看 看 用 户 的 真实 反应 。 


“美感 对 决 性 能 ”心态 经 常会 导致 一 种 “设计 者 对 决 开发 者 ”文化 。 但 是 开 
发 者 们 不 需要 在 一 个 井 底 做 性 能 优化 ， 设 计 者 们 也 不 用 在 一 个 孤岛 上 做 设 
计 优 化 。 团 队 可 以 并 且 应 该 一 起 为 一 个 共同 的 目标 工作 : 绝 佳 的 用 户 体验 。 
Harry Roberts 与 许多 设计 者 和 客户 合作 过 ， 开 发 出 了 优化 性 能 的 漂亮 网 站 ， 
他 说 :“ 现 在 ， 你 拥有 的 不 是 一 个 想 要 漂亮 外 观 的 设计 团队 ， 一 个 想 要 开发 
快速 产品 的 工程 团队 ， 加 上 一 个 想 要 交付 产品 的 产品 经 理 ， 而 是 一 个 所 有 
人 都 想 迅速 地 做 出 又 快 又 好 看 的 产品 的 团队 。 
























































要 做 出 这 些 类 型 的 决定 总 是 需要 人 动脑 的 。 不 要 持 “ 对 抗 ” 心 态 ， 而 要 有 
“什么 对 用 户 最 好 ”的 心理 。 有 时 你 会 发 现 自己 在 忽略 一 个 试验 的 结果 ， 因 
为 它 对 用 户 来 说 不 是 最 好 的 。 比 如 ， 如 果 一 项 性 能 提升 导致 用 户 的 安全 性 
变 弱 会 如 何 ? 是 否 会 经 常 发 现 一 些 网 站 为 了 增加 收益 而 使 用 户 体验 变 得 精 
糕 (比如 更 容易 一 不 小 心 就 给 你 所 有 的 联系 人 发 垃圾 邮件 ) ? 当 一 个 试验 





























权衡 美感 与 性 能 | 123 


的 结果 对 你 的 业务 指标 更 好 时 ， 考 证 一 下 以 确保 它 同 样 对 用 户 更 好 。 


最 终 ， 绝 佳 的 用 户 体验 是 我 们 奋斗 的 目标 。Chris Zacharias 在 他 的 博文 “页 
面 大 小 很 重要 ”(http://blog.chriszacharias.com/page-weight-matters) 中 讲述 
了 他 在 YouTube 做 开发 者 时 的 一 个 试验 。 视 频 播放 页 面 大 小 攀升 到 了 1.2 
MB， 并 伴随 有 大 量 请 求 ， 于 是 Zacharias 决定 就 这 个 页 面 做 一 个 功能 较 
少 但 加 载 速度 明显 更 快 的 原型 版 本 。 他 发 布 了 这 个 原型 ， 取 名 为 “局 要 ” 
(Feather) ， 作 为 一 部 分 YouTube 用 户 的 可 选 体验 。 

















结果 就 如 Zacharias 所 说 ， 是 “困惑 的 "。 采 集 到 的 这 部 分 用 户 的 加 载 时 间 
增加 了 ， 即 便 页 面 小 了 很 多 。 这 是 为 什么 呢 ? Zacharias 写 道 :“ 所 有 人 几 
平 无 法 使 用 YouTube， 因 为 用 它 看 任何 东西 都 要 太 长 时 间 。 在 “羽翼 ”下 ， 
尽管 需要 两 分 多 钟 才能 看 到 视频 的 第 一 帧 ， 但 至 少 观众 可 以 看 视频 了 。 上 
周 ,，“ 羽 枝 ”这 个 词 已 经 传 般 了 这 个 区 域 并 导致 用 户 数 完全 逆转 。 大 量 之 前 
不 能 使 用 YouTube 的 用 户 突 然 都 可 以 用 了 。 


这 就 是 为 什么 要 做 性 能 优化 ， 以 及 为 什么 要 度量 它 。 找 出 美感 与 性 能 之 间 
的 平衡 需要 考虑 整个 用 户 体验 并 测试 ， 以 确保 你 的 直觉 是 正确 的 。 但 是 ， 
让 整个 组 织 都 来 参与 这 项 工作 是 很 艰难 的 。 要 让 上 级 领导 相信 在 这 项 工作 
上 投入 时 间 能 同时 给 业务 和 终端 用 户 带 来 好 处 是 很 难 的 。 让 一 个 设计 和 开 
发 团队 的 其 他 人 做 这 项 工作 也 是 很 难 的 。 下 一 章 我 们 会 介绍 如 何 改变 组 织 
的 文化 来 专注 性 能 。 
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改变 组 织 文 化 





创建 和 维护 一 流 网 站 性 能 的 最 大 障碍 是 组 织 文化 。 不 论 团队 的 规模 和 类 型 
如 何 ， 培 养 、 油 励 以 及 放权 给 你 身边 的 人 都 是 一 项 挑战 。 性 能 问题 归根 结 
底 是 组 织 文化 问题 ， 而 不 是 简单 的 技术 问题 。 





组 织 中 的 每 个 人 都 重视 性 能 对 用 户 体验 的 影响 ， 这 种 情况 是 极 少 见 的 。 通 
常 ， 公 司 里 有 所 谓 的 性 能 卫士 ， 他 们 人 负责 提升 网 站 的 速度 。 有 时， 公司 会 
把 基础 设施 团队 资源 投入 到 性 能 优化 上 。 你 的 组 织 里 一 定 有 性 能 捍卫 者 
(事实 上 ， 可 能 你 就 是 其 中 一 个 ! )。 但 是 ， 把 优化 性 能 的 责任 放 到 一 小 部 
分 人 身上 可 能 会 使 网 站 性 能 失控 ， 特 别 是 当 网 站 成 长 、 变 化 ， 以 及 由 新 人 
接手 时 。 

认 清 一 个 问题 什么 时 候 需 要 用 技术 来 解决 ， 什 么 时 候 需 要 用 文化 来 解决 ， 
以 及 什么 时 候 两 者 都 需要 ， 这 一 点 很 重要 。 本 书 大 部 分 章节 介绍 了 性 能 能 
技术 解决 方案 ， 但 本 章 介绍 的 文化 解决 方案 会 帮助 你 利用 好 这 些 技术 方案 
的 影响 并 使 之 持续 下 去 。 


8.1 性 能 卫士 
在 公司 文化 中 ， 性 能 优化 经 常 由 一 个 人 发 起 。 通 过 微调 感知 性 能 或 页 面 总 
加 载 时 间 ， 你 开始 留意 其 他 网 站 如 何 做 优化 以 及 改进 用 户 体验 。 然 后 你 开 
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始 用 WebPagetest 测试 竞争 对 手 网 站 的 表现 ， 并 和 你 的 网 站 性 能 进行 比较 。 

了 解 了 很 多 容易 在 你 的 网 站 上 实现 的 性 能 优化 之 后 ， 你 便 开始 事半功倍 地 

进行 优化 了 。 

有 些 人 经 常 以 性 能 卫士 的 身份 存在 。 在 其 他 设计 者 和 开发 者 做 完工 作 后 进 
是 这 些 人 的 例 行 杂 务 ， 有 时 他 们 自己 把 这 当成 义务 ， 有 时 他 们 被 分 

配 去 履行 这 些 职责 。 不 论 怎样 ， 这 条 路 都 是 通 向 火 坑 的 。 


























随 着 时 光 的 疲 逝 ， 即 便 是 最 稳定 的 网 站 也 会 遇 到 很 多 性 能 方面 的 挑战 。 











。 新 的 性 能 技术 的 出 现 ， 比 如 最 近 的 picture 的 实现 。 

。 网 站 的 硬件 、 品 牌 和 代码 的 老化 。 

。 新 招 的 设计 者 和 /或 开发 者 。 

。 性 能 方面 经 验 丰富 的 设计 者 和 /或 开发 者 离职 。 

。 浏览 器 持续 发 展 。 

。 Web 标准 的 发 展 ， 比 如 HTTP/2， 根 绝 了 一 些 现 有 的 性 能 约束 。 





由 一 个 专门 的 团队 负责 跟 进 这 些 发 展 很 重要 。 一 个 性 能 捍卫 者 ， 或 者 一 个 
性 能 捍卫 者 团队 ， 是 一 个 公司 在 Web 变革 时 可 以 依赖 的 重 器 。 但 是 维护 高 
性 能 网 站 的 责任 不 能 只 压 在 这 些 人 的 肩 上 。 网 站 的 每 一 个 人 都 应 该 认同 性 
能 的 重要 性 并 明白 如 何 改进 性 能 。 


如 果 塑 造 网 站 的 其 他 设计 者 和 开发 者 没有 接受 性 能 培训 ， 他 们 如 何 做 出 用 
户 体 验方 面 最 好 的 决策 ”他们 如 何 能 在 美感 与 页 面 速度 之 间 权 衡 ? 如 果 他 
们 没有 被 委 以 优化 之 任 ， 任 何 性 能 捍卫 者 很 容易 就 会 在 别人 工作 之 后 进行 
清理 。 花 你 的 时 间 去 清理 别人 的 工作 (尤其 是 在 能 避免 这 种 情况 的 时 候 ) 
是 一 条 通 往 火 坑 的 不 归 路 。 


















































一 个 专门 的 性 能 团队 应 该 聚焦 在 以 下 这 些 事 上 。 

















。 组 织 讲 座 、 学 习 和 研讨 会 来 培训 其 他 人 性 能 相关 的 技能 。 

。 对 其 他 团队 中 优化 网 站 速度 的 设计 者 和 开发 者 的 出 色 工作 进行 襄 奖 。 

。 创建 工具 ， 将 性 能 数据 渗入 到 其 他 人 的 日 常 工作 疲 程 中 ， 帮 助 他 们 理解 
他 们 当前 的 工作 是 如 何 直接 影响 性 能 的 。 

。 确定 性 能 的 基本 要 求 ， 比 如 给 每 个 新 项 目的 性 能 预算 ， 或 者 网 站 页 面 加 
载 时 间 的 最 大 值 。 
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了 解 新 兴 技 术 和 优化 性 能 的 新 方法 。 
公开 交流 网 站 性 能 的 变化 以 及 最 近 的 试验 和 学 习 情 况 ， 如 图 8-1 所 示 。 























Q1 2014 Site Performance Report 


May flowers are blooming, and we're bringing you the Q1 2014 Site Performance 
Report. There are two significant changes in this report: the synthetic numbers are 
from instead of WebPagetest, and we're going to start labeling our 
reports by quarter instead of by month going forward. 


The backend numbers for this report follow the trend from December 2013 - 
performance is slightly up across the board. The front-end numbers are slightly up 
as well, primarily due to experiments and redesigns. Let's dive into the datal 


Server Side Performance 


Here are the median and 95th percentile load times for signed in users on our core 
pages on Wednesday, April 23rd: 


Old Median 
2118/2013 
国 New Median 
4123/2014 
Old 95th 
12/18/2013 


国 New 95th 


n 4/23/2014 








Search 











8-1 





Etsy 的 性 能 报告 详细 说 明了 最 重要 的 几 个 页 
个 季度 哪些 变化 影响 














拥有 一 个 深度 关切 性 能 的 个 人 或 团队 ， 对 达到 上 述 目的 是 很 重要 的 。 这 些 


性 











能 捍卫 者 们 能 高 屋 建 领地 在 全 站 范围 内 处 理性 能 问题 ， 他 们 会 聚焦 问题 
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领域 ， 寻 找 要 改进 的 领域 ， 并 给 建设 网 站 的 其 他 设计 者 和 开发 者 提供 建议 。 
但 是 性 能 优化 与 维护 工作 需要 由 整个 组 织 共同 分 担 ， 而 不 是 依赖 个 人 或 单 
个 团队 。 


8.2 问 上 管理 


页 面 速度 是 一 个 相对 无 形 的 问题 。 虽 然 很 容易 获得 表征 它 的 数字 ， 但 性 能 
表现 通常 是 靠 感知 的 。 总 加 载 时 间 和 帧 率 是 不 能 告诉 人 们 为 什么 他 们 需要 
做 性 能 优化 的 ， 像 这 种 无 形 的 问题 ， 通 常 需要 一 个 组 织 中 有 领导 地 位 的 人 
支持 。 关 心性 能 的 公司 高 管 会 帮助 你 显著 地 塑造 组 织 内 的 文化 。 


要 向 上 强调 性 能 的 重要 性 ， 就 要 重点 向 他 们 展示 性 能 在 业务 指标 和 终端 用 
户 体验 方面 的 作用 。 先 给 他 们 看 一 些 数字 : 对 转化 率 的 影响 、 总 收益 、 用 
户 回 访 率 ， 然 后 让 这 些 公司 高 管 感觉 到 你 的 网 站 有 多 慢 ， 并 代入 用 户 使 用 
时 的 感觉 。 


8.2.1 ”对 业务 指标 的 影响 


互联 网 上 有 大 量 演示 性 能 对 业务 指标 的 影响 的 研究 ， 第 1 章 中 讨论 了 一 些 。 



































。 Akamai 报告 称 75% 的 网 购 用 户 在 遭遇 网 站 冻结 、 崩 溃 、 加 载 时 间 过 长 
或 者 复杂 的 付款 过 程 等 问题 时 ， 会 离开 那 家 购物 网 站 。 

。 Gomez 公司 研究 了 网 购 用 户 的 行为 (http:Wwww.mcrinc.com/Documents/ 
Newsletters/201110_why_web_performance_matters.pdf) ， 发现 88% 的 在 
线 消 费 者 不 会 回 到 他 有 过 糟糕 的 体验 的 网 站 。 该 研究 还 发 现 ， 在 流量 高 
峰 期 ， 超 过 75% 的 网 购 用 户 会 因为 延迟 而 转向 竞争 对 手 的 网 站 。 

。 用 户 会 返回 更 快 的 网 站 ，Google 的 一 项 研究 已 经 证 实 了 这 一 点 (http:// 
googleresearch.blogspot.com/2009/06/speed-matters.html)， 他 们 发 现 用 户 
在 一 个 较 慢 的 网 站 上 会 减少 搜索 行为 。 

。 Google 的 广告 产品 DoubleClick， 移 除了 一 个 客户 端 跳 转 (http:/ 
doubleclickadvertisers.blogspot.com/2011/06/cranking-up-speed-of-dfa-leads- 
to.html) 后 ， 发 现在 移动 设备 上 的 点 击 率 增加 了 12%。 


搞 清楚 你 的 上 级 领导 对 哪 类 数据 感 兴趣 。 是 收入 ?是 会 员 数量 ?还 是 社交 




















A 
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媒体 关注 度 ? 一 旦 你 找 出 他 们 关心 的 指标 ， 就 把 与 那些 指标 相关 的 性 能 
究 汇 报 给 他 们 看 。 将 相关 指标 比如 跳出 率 、 点 击 率 、 回 访 用 户 数 等 ) 与 
收入 以 及 公司 高 管 们 关心 的 其 他 指标 关联 。 每 个 组 织 和 它 的 高 管 们 都 有 明 
确 的 业务 驱动 ， 你 可 以 从 这 些 研究 中 找到 与 之 契合 的 点 。 








如 果 可 能 ， 在 你 自己 的 网 站 做 个 试验 ， 将 性 能 优化 与 高 管 们 关心 的 指标 关 
联 起 来 ， 并 附带 分 享 一 些 其 他 公共 研究 。 虽 然 像 Amazon 和 Google 这 样 的 
大 网 站 可 以 做 降 速 试验 来 估量 网 站 速度 变 慢 对 其 用 户 的 影响 ， 但 你 所 在 的 
单位 可 能 不 太 希 望 你 突 发 奇想 要 降低 网 站 速度 来 看 看 影响 效果 。 应 将 重点 
放 在 寻找 高 效 快 速 的 性 能 收益 上 ， 比 如 压缩 图 片 或 者 实现 更 好 的 缓存 。 


做 一 次 重大 的 改进 并 估量 相关 指标 的 影响 。 如 有 果 可 能 ， 控 制 改 进 的 新 版 本 
做 一 次 A/B 测试 来 比较 用 户 的 行为 。 如 果 能 把 矛头 指向 转化 率 之 类 的 收入 
相关 指标 ， 那 是 最 好 了 ; 如 若 不 然 ， 聚焦 到 其 他 相关 指标 ， 比 如 跳出 率 和 
页 面 访 问 量 。 将 新 高 性 能 版 本 中 任何 统计 上 的 显著 提升 都 关联 到 上 级 领导 
关心 的 指标 上 。 比 如 ， 更 低 的 流失 率 意味 着 更 多 用 户 选 择 了 你 ， 而 不 是 竞 
争 对 手 或 者 回 到 搜索 引擎 结果 。 















































如 果 你 不 能 做 A/B 测试 ， 则 在 优化 前 后 都 估量 一 下 相关 指标 。 这 不 是 特别 
精准 ， 但 将 是 你 能 给 上 级 看 的 最 佳 案 例 。 第 6 章 中 有 更 多 关于 估量 性 能 优 
化 影响 的 内 容 。 把 你 做 过 的 工作 以 及 它们 给 业务 指标 带 来 的 变化 分 享 给 高 
管 们 看 ， 以 便 他 们 更 好 地 理解 性 能 工作 的 影响 。 


在 优化 性 能 的 同时 ， 也 记录 一 下 你 做 这 些 工作 花费 的 时 间 。 设 计 与 开发 耗 
时 是 一 项 业务 成 本 ， 这 在 你 说 服 高 管 们 支持 你 的 方案 时 需要 提 到 。 找 出 最 
快 并 且 影 响 最 大 的 可 能 收益 ， 强 调 优化 性 能 并 不 会 耗费 太 多 业务 成 本 。 将 
一 定数 量 的 资源 与 开发 耗 时 转化 成 业务 的 收入 增长 ， 这 将 是 你 和 高 管 们 沟 
通 时 的 最 大 筹码 ， 并 且 当 需要 规模 更 大 、 更 耗 时 的 性 能 工作 时 ， 这 会 帮 你 
继续 获取 支持 。 























与 上 级 领导 沟通 时 应 该 提 及 一 些 互联 网 的 公开 研究 成 果 ， 一 些 你 已 经 在 你 
的 网 站 上 做 过 的 研究 ， 以 及 这 些 工 作 的 业务 成 本 。 这 种 沟通 方案 的 基础 在 
于 ， 理 解 哪些 相关 指标 和 业务 要 素 是 你 的 沟通 对 象 最 关心 的 。 
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8.2.2 ”体验 网 站 速度 


帮助 上 级 领导 理解 网 站 用 户 的 体验 很 关键 。 我 们 可 以 一 整 天 谈论 数据 ， 但 
是 要 确定 性 能 对 用 户 的 根本 影响 ， 就 需要 你 聚焦 在 网 站 的 用 户 体验 了 。 要 
记 住 你 公司 的 大 部 分 人 可 能 在 用 更 新 的 设备 、 更 快 的 网 络 连 接 访 问 网 站 ， 
而 且 他 们 很 可 能 与 你 的 数据 中 心 非常 近 。 全 球 其 他 用 户 的 体验 如 何 呢 ?用 












































户 不 用 台式 电脑 访问 时 ， 体 验 如何 呢 ? 





用 不 同 的 地 理 位 置 和 设备 多 次 运行 WebPagetests 并 对 比 结果 。 下 面 这 个 











链接 格式 用 来 将 所 有 结果 汇集 成 一 个 单一 的 幻灯 片 视图 


webpagetest.org/video/compare.php?tests=<Test 1 ID>,<Test 2 





， 以 方便 对 比 : 
ID>...。 


比如 ， 在 图 8-2 中 ， 我 对 《 赫 芬 顿 邮 报 》 网 站 运行 了 3 次 独立 的 测试 ， 一 个 
用 台式 电脑 的 Chrome 浏览 器 ， 地 理 位 置 为 弗吉尼亚 ， 一 个 用 IE8 浏览 器 ， 














地 理 位 置 为 新 加 坡 ， 还 有 一 个 用 Android 手机 版 Chrome 浏 








览 器 ， 地 理 位 置 


为 弗吉尼亚 。 每 个 测试 之 间 的 总 体 数据 差异 很 大 ， 这 也 是 移动 和 总 体 性 能 
优化 必要 性 的 有 力 证 明 ， 幻 灯 片 视图 确实 有 助 于 我 们 感觉 用 户 体验 的 不 同 。 























3: Dulles, VA on 
Motorola G 
using Chrome 
(Edit) 








WE ARE ON THE VERGE OF 


THE SIXTH EXTINCTION 








图 8-2: WebPagetest 提供 了 幻灯 片 视图 和 视频 以 便 同 时 对 比 测试 结果 ， 这 


让 我 们 更 好 地 理解 和 感觉 这 些 网 站 的 性 能 





跟 上 级 沟通 的 另 一 个 角度 是 声誉 。 在 说 服 上 级 领导 性 能 应 
计 者 和 开发 者 的 一 项 重要 考量 时 ， 虽 然 收 益 影 响 是 你 可 以 














该 是 组 织 内 的 设 
使 用 的 一 项 重要 
对 手 ， 他 们 的 加 














指标 ,但 它 不 是 你 唯一 的 一 个 筹码 。 你 的 网 站 可 能 有 苋 
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载 时 间 如 何 ? 


WebPagetest 还 允许 在 开始 一 个 性 能 对 比 之 前 添加 多 个 URL (如 图 8-3) 。 所 
有 这 些 在 Visual Comparison 工具 中 进行 的 测试 都 会 使 用 弗吉尼亚 杜 勒 斯 这 
个 测试 地 址 。 








FS WEBPAGETEST 





TEST HISTORY' FORUMS DOCUMENTATION ABOUT 


H UU 
Test a website's performance 
mr conoreon 
Enter multiple urls to compare them against each other visually. 


EE 
EE 


EAdd D0 


For each URL, 3 first-view tests will be run from ‘Dulles, VA' and the median run will be used for comparison, The tests 
will also be publically available. Ifyou would like to test wlth different setings, submit your tests individually fom the 
st Dage. 














图 8-3: 可 以 在 WebPagetest 中 输入 多 个 URL 来 比较 它们 的 性 能 


一 旦 测试 完成 ，WebPagetest 能 展示 一 个 体现 每 个 页 面 加 载 过 程 的 幻灯 视 
图 ， 如 图 8-4 所 示 。 甚 至 可 以 导出 一 份 页 面 串 联 加 载 的 视频 ， 这 非常 有 助 于 
感觉 网 站 加 载 速度 的 不 同 。 我 们 可 以 完全 避 开 数据 ， 重 点 理解 在 相同 时 间 
内 用 户 如 何 体验 我 们 的 网 站 和 竞争 对 手 的 网 站 。 






































图 8-4: 使 用 WebPagetest 的 幻灯 片 视图 以 及 视频 比较 ， 以 便 更 好 地 理解 和 
比较 不 同 网 站 的 性 能 感觉 
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网 页 速度 和 用 户 体验 不 是 秘密 。 你 的 任何 竞争 对 手 都 可 以 测试 你 的 网 站 ， 
或 者 用 性 能 工具 运行 网 站 看 看 它 是 如 何 加 载 的。 提醒 公司 的 高 管 们 网 站 不 
仅 被 用 户 分 析 ， 也 会 被 竞争 对 手 分 析 ! 要 确保 你 们 比 竞争 对 手 做 得 好 。 


幻灯 斤 视 图 和 视频 的 另 一 个 用 处 是 比较 网 站 性 能 优化 前 后 的 效果 。 测 量 这 
些 优化 对 相关 指标 的 影响 是 很 重要 的 ， 将 不 同 网 站 的 加 载 过 程 用 可 视 化 的 
方式 记录 下 来 也 很 有 帮助 ， 尤 其 是 当 优化 是 针对 感知 性 能 而 不 是 页 面 总 加 
载 时 间 时 。 


在 与 上 级 沟通 的 过 程 中 使 用 这 些 工具 ， 以 便 证 明 组 织 内 的 所 有 人 都 会 对 用 
户 体验 造成 影响 ， 并 且 应 该 将 性 能 作为 日 常 工作 的 一 部 分 。 要 使 一 个 网 站 
让 人 感觉 很 快 ， 每 个 能 影响 用 户 体验 的 人 都 需要 在 他 们 的 日 常 工作 流程 中 
将 性 能 放 在 第 一 位 。 


8.3 与 其 他 设计 者 和 开发 者 工作 


培训 和 认可 是 激励 与 你 共事 的 设计 者 和 开发 者 重视 性 能 的 关键 ， 你 的 职责 
在 于 不 断 地 给 他 们 提供 所 需 的 工具 ， 以 及 向 他 们 灌输 性 能 对 用 户 体验 的 影 
响 。 虽 然 再 三 强调 低 性 能 的 负面 影响 确实 能 凸显 性 能 的 重要 性 ， 但 在 长 期 
运作 中 支持 和 嘉奖 对 性 能 优化 的 贡献 才 是 上 策 。 帮 助 身 边 的 人 打造 优异 的 
用 户 体验 ， 并 让 他 们 知道 其 所 做 工作 的 价值 。 












































8.3.1 培训 
有 很 多 种 方式 可 以 帮助 设计 者 和 开发 者 聚焦 于 性 能 。 提 前 考虑 到 语义 和 复 
用 性 ， 会 为 后 面 的 设计 和 开发 节省 大 量 的 时 间 。 当 代码 更 整洁 ， 网 站 的 设 
计 模 式 很 容易 一 次 更 新 或 复 用 时 , 编辑 起 来 会 更 容易 ， 也 可 以 避免 将 来 面 对 
令 人 头疼 的 问题 。 














除了 这 些 好 处 ， 你 需要 对 公司 内 其 他 人 员 就 他 们 的 日 常 工作 是 如 何 影响 性 
能 的 进行 培训 。 非 正式 午餐 会 议 、 讲 座 和 研讨 会 都 是 很 好 的 交流 方式 ， 可 
以 培训 入 们 如 何 通 过 关注 性 能 成 为 更 优秀 的 设计 师 和 开发 者 。 可 以 考虑 从 
以 下 儿 方面 进行 培训 : 





。 在 手机 上 的 性 能 如 何 ? 
。 在 设计 阶段 人 们 是 如 何 影响 性 能 的 ? 
。 如 何 提高 感知 性 能 ? 





共享 他 人 关于 如 何 设计 出 色 、 高 性 能 的 用 户 体验 的 幻灯 片 和 演示 视频 。 培 
训 应 该 是 一 个 持续 进行 的 工作 ， 新 员工 不 熟悉 这 些 技巧 ， 而 老 员工 也 可 能 
因 忙 于 其 他 工作 而 忘记 了 最 佳 实践 。 要 定期 进行 午餐 会 议 或 其 他 非 正式 培 
训 ， 告 诉 他 们 每 个 人 如 何 对 性 能 产生 积极 影响 。 


在 公司 中 ， 制 定 可 接受 的 页 面 加 载 时 间 的 基准 线 。 多 慢 是 太 慢 ? 将 可 接受 
的 页 面 加 载 时 间 羡 值 告诉 每 个 人 :“ 我 们 的 目标 是 每 个 页 面 的 总 加 载 时 间 为 
1 秒 。 或 者 ， 评 估 网 站 中 性 能 最 佳 的 页 面 是 哪些 ， 它 们 加 载 得 有 多 快 ， 并 
将 其 作为 整个 网 站 的 性 能 衡量 标准 。 确 保 测 量 那些 性 能 最 差 而 访问 量 很 高 
的 页 面 ， 并 建议 整个 团队 聚焦 该 问题 ， 以 使 这 些 页 面 尽 可 能 地 快 。 指 南 和 
衡量 标准 应 该 清晰 且 易于 执行 ， 这 样 成 效 和 目标 就 会 显而易见 。 












































如 果 你 可 以 对 多 数 重要 的 网 页 进行 自动 测试 来 获得 性 能 信息 ， 那 请 这 样 做 
吧 。 当 一 个 网 页 的 性 能 变 差 时 ， 确 保 其 对 团队 可 见 ， 这 样 你 可 以 搞 清 楚 是 
什么 改变 导致 了 性 能 下 降 ， 并 解决 该 问题 。 为 性 能 恶化 设置 警报 ， 并 将 其 
共享 给 其 他 设计 师 和 开发 者 ， 使 得 在 网 站 发 展 过 程 中 每 一 个 人 都 知晓 。 


为 每 一 个 新 项 目 设 定性 能 预算 ， 确 保 每 一 位 设计 师 和 开发 者 都 知晓 其 含义 ， 
并 就 这 些 数字 及 如 何 权衡 美感 和 速度 进行 培训 。 在 7.3 市 中 可 阅读 更 多 关于 
性 能 预算 的 内 容 。 为 整个 团队 提供 基准 线 指导 和 易于 理解 的 〈 且 易于 测量 
的 ) 指标 ， 将 有 利于 他 们 打造 一 流 的 用 户 体验 。 



































8.3.2 ”认可 

要 让 人 们 在 日 常 工 作 流程 中 作出 良好 的 决策 ， 需 要 搞 清楚 如 何 展现 有 关 他 
们 当前 工作 的 性 能 数据 。 在 Etsy， 我 们 有 一 个 工具 栏 ， 每 当 Etsy 的 员工 登 
录 时 就 显现 出 来 ， 如 图 8-5 所 示 。 设 计 师 和 开发 者 可 以 利用 这 个 工具 栏 来 理 
解 他 们 所 关注 页 面 的 信息 。 它 包括 访问 流量 数据 ， 该 页 面 上 正在 运行 的 试 
验 列 表 ， 以 及 用 来 观看 该 页 面 移动 版 的 工具 。 它 还 包括 性 能 时 间 数 据 ， 并 
且 在 性 能 时 间 违 反 性 能 服务 水 平 协议 时 会 发 出 警报 。 
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Art Home&Living Jewelry Women Men Kids Vintage Weddings CraftSupplles 


图 8-5: 在 Etsy， 我 们 为 网 站 相关 员工 提供 了 一 个 工具 栏 。 它 可 以 直观 显示 
性 能 时 间 数据 ， 当 页 面 出 现 性 能 问题 时 可 以 清晰 地 显示 出 来 ， 这 样 设 
计 师 和 开发 者 就 可 以 看 到 该 问题 


以 这 种 方式 显示 性 能 数据 对 设计 师 和 开发 者 很 有 帮助 ， 因 为 它 可 以 不 断 提 
是 他 们 性 能 是 用 户 体验 的 一 部 分 。 在 设计 师 和 开发 者 的 工作 中 ， 要 考虑 用 
不 同 途径 来 定期 强化 他 们 这 方面 的 知识 ， 而 不 是 等 到 网 站 建 好 之 后 再 看 看 
网 站 有 多 快 。 


定期 分 享 该 信息 的 另外 一 种 方式 是 ， 当 网 站 中 出 现任 何 性 能 退化 时 ， 自 动 
发 送 邮 件 。 性 能 退化 时 立即 让 员工 知悉 ， 这 是 能 够 让 员工 立即 解决 该 问题 
的 重要 一 步 。 让 这 种 性 能 指标 信息 成 为 日 常生 活 和 工作 流程 中 的 一 部 分 ， 
这 样 它 会 让 人 感觉 很 自然 ， 就 像 是 做 好 工作 的 一 部 分 。 











na 
































一 旦 接受 了 培训 ， 并 且 有 了 适当 的 工具 ， 理 解 了 网 站 性 能 及 如 何 影 响 性 能 ， 
员工 就 会 感觉 受到 了 激励 ， 愿 意 去 提升 性 能 。 但 是 要 记得 这 是 一 个 文化 问 
题 ， 不 是 技术 问题 ， 尽管 有 很 多 帮助 人 们 提升 网 站 速度 的 技术 方案 ， 你 仍 
然 需 要 做 额外 的 工作 来 解决 性 能 文化 的 社会 问题 。 


改变 组 织 文化 的 一 种 方式 是 ， 公 布 你 为 改善 性 能 所 作出 的 努力 。 在 Dyn 工 
作 时 ， 我 发 布 了 一 篇 文章 ， 总 结 了 我 是 如 何 完 成 一 项 艰巨 的 模板 清理 工作 
的 ， 以 及 所 带 来 的 性 能 提升 。 它 不 仅 有 助 于 Dyn 博客 的 读者 进行 学 习 ， 而 
且 还 将 性 能 收获 非常 清晰 地 展现 给 了 Dyn 的 员工 。 














当前 端 架构 师 和 咨询 师 Harry Roberts 完成 客户 的 一 大 块 性 能 工作 后 ， 他 跟 
他 们 分 享 了 一 系列 数据 。 这 些 数据 让 他 们 非常 兴奋 ， 他 们 甚至 开始 自己 进 
行 测试 。 向 他 们 提供 一 些 这 样 的 东西 ， 会 让 他 们 参与 其 中 。 从 那 时 起 ， 他 
们 像 我 一 样 关心 数据 并 控制 数据 值 。 Roberts 说 道 。 


公布 你 的 工作 并 庆祝 成 效 ， 对 很 多 设计 师 和 开发 者 来 说 是 巨大 的 激励 。 像 
我 一 样 展 示 性 能 改进 ， 如 图 8-6， 可 以 有 力 地 促进 公司 文化 的 改变 ， 同 时 能 
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鼓励 其 他 人 积极 地 改善 性 能 。 
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Dyn » Blog Home » Web Design & Development Tips » How We Got DynDNS.com To Load Faster And How You Can Learn From It 


CuaneaepapeanapProntas Werre focused on engineering excellence here at Dyn and are routinely brainstorming ways to continue to improve user 
Ee experience. As attendees of the Velocity Conference and notorious nitpickers of page load time, we were proud of how fast 
lient Services DynDNS.com loaded...but knew we could do even better. 


Company News & 


Updates Why care about load times? Page speed has an impact on sales and conversions and is a big part of the user experience. | 
Company Yoices dug through our front-end files, cleaning and optimizing our site until we'd sliced our page load time in halfi 

Culture Here are some tips on how to make some major improvements to your site's speed: 

DNS Traffic 

Management 


Do the first big pass at cleaning CSS files 
Dyn Research 
What it did for us: 


DynEdu 
Email Message 。 Homepage stylesheet: 41.94% file size improvement 
Management 

» IE-specific stylesheets: 92.11% file size improvement 
Events 

。 Main stylesheet: 11% file size improvement 
Performance Assurance 


* Other high-traffic pages: 12.9% file size improvement 








Product & Integration 


图 8-6: 完成 DynDNS.com 的 模板 清理 工作 后 ， 我 发 布 了 一 篇 文章 ， 总 结 了 
我 是 如 何 完成 这 项 工作 的 ， 以 及 所 获得 的 性 能 提升 


在 Etsy， 性 能 团队 尝试 了 一 个 不 同 的 公共 策略 来 进行 文化 改变 。2011 年 ， 
该 团队 发 布 了 第 一 份 性 能 报告 ， 其 中 包括 儿 个 重要 网 页 的 加 载 时 间 概 况 ， 
如 图 8-7 所 示 。 它 包含 了 一 些 相当 尴 人 的 指标 ， 但 是 性 能 团队 意识 到 ， 承 认 
存在 性 能 改进 的 机 会 很 重要 。 他 们 发 现 网 站 速度 不 是 一 个 秘密 ， 任 何人 都 
可 以 测量 它 ， 而 且 这 些 数据 很 重要 ，Etsy 中 的 每 个 人 都 应 该 知晓 ， 因 为 它 
们 反映 了 网 站 的 实际 用 户 体验 。 


























改变 组 织 文化 | 135 





Etsy News Blog Weleh 


Tech Update: Faster and Faster E23 
Oer Edrions 
国 Amo sm weconendmslog 
1 Soo Penow 国 oo aeo 
所 uk sanom seaer nanavoon 


国 mawem 


Ssy Tosch 


Deooeeeo 





Stemy by 
proauea Anneuroemenms 


Of all the awesome new features we delight in rolling out to our 
members, one of the mos satisfying features to deliver is speed. 
ln the Past year we've made targeted improvements to copvos, 
search, and relisting performanee, and we've greatly improved 
Page deiivery times to our members outside the U.S. We gain 
more than warm furies with these improvements Studies have 
shown that slow pages ead to Jess engaged visitors — they dick 
fewer links, read fewer pages, and make fewer purchases. And just 
as yo fiend for your jed latte to go, site performance is becoming 
increasingjy important as more of our members aceess Elsy Seth 
through mobile devices and networks. 





Woe have already taken our commitrment to performance to the next level We bave been 
pathering every-which-way measurements around site performasee, and we will be kicking 
off more projects to improve performance across the board. Continuing in our spirit of 











图 8-7: Etsy 在 2011 年 发 布 了 第 一 份 性 能 报告 ， 有意 包含 了 一 些 烛 熔 的 较 长 
的 页 面 加 载 时 间 


在 发 布 第 一 份 报告 后 ， 该 困 队 中 负责 主页 的 人 员 发 现 他 们 的 数据 很 粳 糕 。 
他 们 艰难 地 决定 了 网 站 功能 及 设计 方式 ， 并 权衡 了 美感 与 速度 ， 以 便 改 进 
加 载 时 间 。 在 第 二 份 性 能 报告 发 布 时 ， 主 页 的 加 载 时 间 显 著 降 低 了 ， 如 图 
8-8 所 示 。 
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Page generation time in milliseconds (smaller is better) 











se0 
Listing 
ov 38 
TEE 
Profile 
ma 
7 
Search 
Nov 528 970 
880 
Home 
Nov 80 


图 Average 95th Percentile 











图 8-8: 在 第 二 份 性 能 报告 中 ，Etsy 主页 的 加 载 时 间 大 幅 下 降 


公开 承认 网 站 的 性 能 情况 会 让 人 们 更 有 责任 感 ， 也 会 令 他 们 愿意 帮忙 。 设 
计 师 和 开发 者 通常 愿意 帮助 完成 普通 的 、 积 极 的 工作 ， 而 将 该 工作 公开 将 


有 助 于 他 们 参与 其 中 。 


帮助 快速 启动 文化 改变 工作 的 男 一 个 途径 是 ， 让 团队 易于 感受 到 性 能 提升 
工作 所 带 来 的 成 效 。 找 到 整个 网 站 中 所 有 唾 手 可 得 的 果实 ， 即 很 容易 被 另 
一 位 设计 师 或 开发 者 完成 的 工作 ， 把 它们 记录 下 来 ， 加 上 标签 或 者 建立 一 
个 列表 ,以便 人 们 快速 参考 使 用 。 下 面 列 举 了 一 些 可 共享 的 易 获 取 的 性 能 


改进 的 示例 。 


。 清理 并 规范 整个 网 站 现 有 的 按钮 样式 ， 记 录 下 所 有 不 同 的 按钮 ， 以 便 人 


们 一 个 一 个 地 删除 。 


。 隔离 样式 表 中 那些 可 能 不 再 需要 的 CSS 块 ， 并 让 人 确认 确实 不 再 需要 它 


们 ， 然 后 把 它们 请 理 掉 。 


。 找到 网 站 中 使 用 的 大 图 片 ， 将 它们 列 出 来 ， 以 便 工作 人 员 将 它们 重新 输 


出 、 压 缩 或 者 寻找 其 他 方式 来 优化 文件 大 小 。 
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对 于 列表 中 的 每 一 项 ， 尽 可 能 详细 地 说 明 需 要 做 的 改进 ， 以 便 工作 人 员 可 
以 快速 着 手 解 决 。 每 一 项 的 工作 量 要 小 一 些 ， 几 个 小 时 就 可 以 完成 。 如 果 
一 个 解决 方案 要 花费 不 止 几 个 小 时 的 时 间 ， 让 设计 师 或 开发 者 将 过 程 简 单 
记录 下 来 ， 以 便 将 来 另外 一 个 工作 人 员 可 以 接手 。 对 于 其 他 设计 师 和 工作 
者 来 说 ， 应 该 可 以 很 直观 和 简单 地 开始 性 能 优化 工作 。 

当 别 人 致力 于 改进 网 站 的 整体 性 能 时 ， 你 可 以 做 的 最 重要 的 事情 就 是 祝贺 
他 们 的 工作 。 为 每 一 点 滴 的 性 能 改进 感谢 贡献 者 ， 并 在 公司 内 部 将 他 们 的 
工作 公开 ， 如 图 8-9 所 示 。 


工 



































Chris Fairbanks, Performance Hero 


Chrs cpmized the moble purchases page for great justce 














图 8-9: Etsy 的 性 能 团队 通过 一 个 仪表 盘 来 表扬 其 他 团队 中 为 提升 性 能 作出 
贡献 的 员工 。 我 们 给 出 了 他 们 的 照片 、 一 幅 显 示 性 能 改进 的 图 ， 以 及 
解决 方案 的 简短 描述 


在 Eksy， 我 们 维护 着 一 个 内 部 仪表 盘 ， 通 过 它 来 表扬 “性 能 英雄 ”: 其 他 团 
队 中 为 解决 和 提升 网 站 页 面 加 载 时 间 和 感知 性 能 作出 贡献 的 人 。 我 们 会 定 
期 更 新 它 ， 来 展示 同事 们 的 创意 工作 、 益 明 性 能 改进 的 相关 图 像 ， 以 及 他 
们 所 采取 的 解决 方案 的 说 明 。 我 们 还 会 给 Etsy 的 其 他 设计 师 和 开发 者 发 送 
邮件 ， 告 诉 他 们 我 们 已 经 更 新 了 仪表 盘 ， 这 样 每 个 人 都 可 以 视 贺 改善 网 站 
性 能 的 员工 。 


提升 性 能 确实 是 每 个 人 的 责任 。 任 何 影响 网 站 用 户 体验 的 人 都 与 网 站 性 能 
相关 联 。 尽 管 你 单枪匹马 地 建立 并 维护 一 个 相当 快速 的 用 户 体验 是 可 能 的 ， 






































但 是 当 别 的 工作 人 员 接 触 网 站 并 作出 改变 时 ， 或 者 随 着 网 站 的 持续 发 展 ， 
尔 会 不 断 地 进行 艰 昔 战 斗 。 培 训 并 认可 你 周围 的 每 一 个 人 ， 让 他 们 理解 如 
何 改 进 性 能 ， 以 及 他 们 的 选择 如 何 影 响 终端 用 户 体验 。 性 能 确实 是 文化 改 
革 问 题 ， 不 是 技术 问题 ， 在 组 织 内 培养 性 能 卫士 ， 以 便 为 网 站 创建 最 佳 的 
用 户 体 验 。 








Web 性 能 工作 既 富 有 意义 又 充满 挑战 。 你 有 能 力 为 用 户 创 建 非 几 的 体验 。 
找到 那些 性 能 提升 点 ， 不 管 是 实现 新 的 缓存 规则 、 优 化 图 像 还 是 创建 可 复 
用 的 设计 模式 。 激 励 同 事 们 成 为 性 能 卫士 。 尽 量 打造 最 佳 用 户 体验 ， 实 现 
美感 与 速度 的 平衡 。 关 注 性 能 ， 每 个 人 都 将 获 益 。 
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作者 介绍 

Lara Callender Hogan 是 Etsy 性 能 团队 的 高 级 工程 经 理 ， 曾 管理 过 Etsy 的 
移动 Web 工程 团队 。 在 加 入 Etsy 之 前 ，Lara 是 一 名 用 户 体验 经 理 ， 也 是 一 
名 自学 成 才 的 前 端 开发 人 员 ， 曾 在 多 家 创业 公司 任职 。 她 有 紧急 医疗 救护 
技术 员 (EMT) 认证 ， 有 自己 的 摄影 事业 ， 同 时 还 是 一 个 LGBT 婚恋 网 站 
的 联合 创始 人 。 她 还 认为 用 甜 甜 圈 来 庆祝 职业 成 就 很 重要 。 


封面 介绍 
本 书 封面 上 的 动物 是 一 只 冠 头 蜂鸟 ( 族 冠 蜂鸟 ) ， 一 种 繁殖 于 委内瑞拉 东 
部 、 特 立 尼 达 、 诗 亚 那 地 区 和 巴西 北部 的 小 蜂 乌 。 





这 种 鸟 也 叫 作 继 冠 蜂鸟 ， 体 型 非常 小 巧 ， 以 至 于 在 花丛 间 飞 王 时 很 容易 被 
误 认 成 一 只 大 蜜蜂 。 其 红 吃 有 一 个 黑色 的 类， 短 而 直 。 峻 鸟 没有 光鲜 竞 丽 
的 羽毛 ， 但 是 雄 鸟 有 着 醒目 的 栖 色 羽毛 ， 上 有 黑色 斑点 ， 从 颈 侧 和 权 色 的 
头 冠 外 延 。 


蜂鸟 通常 独 栖 ， 所 以 它们 在 寻找 花蜜 或 捕捉 昆虫 为 食 时 ， 经 常 形 单 影 只 或 
三 两 成 队 。 


O’Reilly 书籍 封面 上 的 很 多 动物 都 濒临 灭绝 。 它 们 对 这 个 世界 都 很 重要 。 想 
了 解 更 多 关于 如 何 帮助 它们 的 信息 ， 可 以 访问 animals.oreilly.com。 


封面 图 片 选 自 Wood*s Natural History。 
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速度 与 激情 : 以 网 站 性 能 提升 用 户 体验 


Web 设 计 师 在 权衡 外 观 设计 与 网 站 性 能 时 总 是 要 作出 艰 
难 的 选择 。 良 好 的 内 容 、 布 局 、 图 片 和 交互 对 于 吸引 用 
户 来 说 至 关 重 要 ， 这 其 中 的 每 一 个 元 素 都 会 对 页 面 加 载 
时 间 和 网 站 的 感知 性 能 造成 巨大 影响 。 本 书 会 帮助 你 在 
项 目 过 程 中 将 页 面 速度 放 在 首位 ， 向 你 展示 如 何 验证 最 
关键 的 设计 决策 ， 从 而 提升 页 面 加 载 速度 ， 打 造 最 佳 用 
户 体验 。 


如 果 你 是 Web 设 计 师 或 开发 人 员 ， 
书 非常 适合 你 。 


想 提升 网 站 性 能 ， 本 


品牌 和 用 户 的 影响 
: 浏览 器 是 如 何 获 取 和 泻 染 


回 页 面 加 载 时 间 对 网 站 、 


加 页 面 速度 的 基础 知识 
内 容 的 


卓 优化 和 加 载 图 片 的 最 佳 实战 

罩 如 何 清 理 HTML 和 CSs， 优 化 网 络 字体 
目 以 性 能 为 目标 的 移动 优先 设计 

加 随 着 网 站 的 演进 ， 利 用 工具 度量 性 能 
目 改变 组 织 性 能 文化 的 方法 


Lara Callender Hogan 是 Etsy 性 能 团队 的 高 级 工程 经 理 ， 


曾 管理 Etsy 的 移动 Web 工 程 团队 。 在 加 入 Etsy 之 前 ，Lara 
是 一 名 用 户 体验 经 理 ， 也 是 一 名 自学 成 才 的 前 端 开发 人 
员 ， 曾 在 多 家 创业 公司 任职 
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“如 果 你 想 知 道 审 美 选 择 


如 何 影 响 网 站 性 能 ， 或 
者 蜂窝 网 络 如 何 影响 网 
站 的 用 户 体验 ， 那 么 请 
读 读 这 本 书 吧 。 这 本 书 
提供 了 提升 和 度量 网 站 
性 能 所 需 的 工具 ， 包 括 
增强 整个 公司 的 性 能 意 
识 的 具有 可 行 性 的 策略 。 
高 性 能 的 网 站 就 是 设计 
良好 的 网 站 。” 
一 一 Jason Huff 
Etsy 产 品 设计 经 理 


是 设计 中 不 可 或 缺 
1 部分。 一 个 需要 很 
长 时 间 来 加 载 的 漂亮 
站 或 应 用 ， 会 无 人 问津 。 
这 本 书 为 设计 师 提供 了 
打造 高 性 能 网 站 所 需 的 
知识 。” 
一 一 Jason Grigsby 
Cloud Four 联 合 创始 人 
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